Chỉ thị góc không hiển thị

Question

Tôi gặp vấn đề nhỏ với chỉ thị góc hiện đang hoạt động và tôi không biết tại sao. Tôi nghĩ rằng đó là một vấn đề khá đơn giản mà tôi đang xem, có thể bạn có thể giúp tôi.

Chỉ thị được định nghĩa như thế này:

angular.module('directives', []) 
    .directive('my-directive', function() { 
     return { 
      restrict: 'AE', 
      scope: { 
       name: '=name' 
      }, 
      template: '<h1>{{name}}</h1>' 
     }; 
    }); 

Sau đó index.cshtml:

<my-directive name="test"></my-directive> 

Application.js:

var app = angular.module('MyApp', [ 
    ..., 
    'directives' 
]); 

Và đây là controllers.js

angular.module('controllers', ['apiServices', 'directives']) 
    .controller('homecontroller', function($scope, $resource, webApiService, $log, $translate, $localStorage, $sessionStorage) { 

Ok xác nhận rằng directives.js được tải, nếu không application.js sẽ không nói về 'module không xác định'. Không có thông báo lỗi trong bảng điều khiển, điều này không hiển thị. Bất kỳ ý tưởng?

---

EDIT

Vì vậy, khi chỉ ra, tôi đã thay đổi tên chỉ để camelCase, nhưng vẫn không có may mắn:

<my-directive name="John Doe"></my-directive> 

Và

.directive('myDirective', function() { 

Nhưng không có gì là hiển thị được nêu ra.

EDIT

Vấn đề là góc hy vọng một đối tượng được chuyển vào các thuộc tính, không phải là một chuỗi chữ. Nếu bạn tạo một đối tượng person = {name: 'John'}, chuyển người đó vào, sau đó viết {{person.name}} (giả sử chúng ta đặt tên thuộc tính + phạm vi var person).

Answer 1

Trong khi bình thường hóa, Góc chuyển đổi - tên được phân tách thành camelCase.

Vì vậy, sử dụng camelCase khi xác định các chỉ thị bên trong JS:

.directive('myDirective', function() { 

Fiddle

Answer 2

chỉ thị của bạn phải được lạc đà-cased

.directive('myDirective', function() { 

sau đó trong html của bạn, bạn được tự do gọi là my-directive hoặc myDirective

Cả hai đều hợp lệ

<my-directive name="test"></my-directive> 
<myDirective name="test"></myDirective> 

Answer 3

tôi chắc chắn rằng bạn đã figured này ra đã có, nhưng nếu bạn thay đổi định nghĩa phạm vi của bạn cho tên là

scope: { 
    name: '@' 
} 

sau đó bạn sẽ có thể để vượt qua một chuỗi. '@' Nội suy thuộc tính trong khi '=' liên kết nó. Ngoài ra, bạn không cần phải bao gồm tên thuộc tính nếu nó giống với biến phạm vi.

Answer 4

Chỉ cần theo dõi về điều này, tôi đã phải sử dụng cách sau đây để làm cho chỉ thị của tôi hoạt động.

<my-directive name="test"></my-directive> 

Answer 5

Sự cố có vẻ như trong định nghĩa chỉ thị. Bạn lưu ý trong câu hỏi của bạn rằng Angular hy vọng một đối tượng; điều này đúng với phạm vi "=", nhưng không đúng với phạm vi "@". Trong phạm vi "@", Angular chỉ mong đợi một chuỗi. Tôi đã tạo một đoạn mã bên dưới.

Quá nhiều module

Trừ khi bạn đang sử dụng lại các chỉ thị trong nhiều ứng dụng, không tạo ra một module mới cho nó. Thêm định nghĩa chỉ thị vào mô-đun mà bạn đã tạo cho ứng dụng. Trong ví dụ dưới đây, tôi đã gọi lại mô-đun bằng cách sử dụng "angular.module (moduleName)" ... Khi chỉ sử dụng một đối số, Angular trả về đối tượng hiện có thay vì tạo một đối tượng mới. Đây là cách chúng ta có thể tách mã thành nhiều tệp.

Những điều cần lưu ý

Bạn sẽ thấy như sau:

1. Bạn không cần phải nạp module vào biến ứng dụng. Gọi Singleton mỗi lần thực sự an toàn hơn và dễ dàng hơn trong việc quản lý bộ nhớ.
2. Chỉ thị trong trường hợp lạc đà, như bạn đã lưu ý.
3. Tôi đang đặt thuộc tính name thành giá trị chuỗi chứ không phải đối tượng; điều này hoạt động vì cài đặt phạm vi "@".
4. div được đặt thành ng-app = 'MyApp'. Điều này thường được đặt thành phần tử html, nhưng tôi không muốn gây rối với DOM trên Stack Exchange. Chỉ thị ng-app có thể được đặt trên bất kỳ phần tử nào và các chỉ thị được liên kết với mô-đun đó sẽ được áp dụng trên tất cả các phần tử nằm trong phạm vi của phần tử đó. Không có chỉ thị ng-app, Angular không biết mô-đun nào chạy trên trang.

//app.js - this defines the module, it uses two parameters to tell the injector what to do. 
 
angular.module('MyApp',[]); 
 

 
//directive.js stored elsewhere 
 
//this calls back the module that has been created. It uses one parameter because the injector is no longer needed. 
 
angular.module('MyApp').directive('myDirective', function() { 
 
     return { 
 
     restrict: 'AE', 
 
      scope: { 
 
      name: '@' 
 
     }, 
 
     template: '<h1>{{name}}</h1>' 
 
     }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    
 
<div ng-app="MyApp"> 
 
<h1>Successful Load</h1> 
 
<my-directive name="test"></my-directive> 
 
<p>By applying the directive definition to the MyApp module, the MyApp module knows to activate the directive within this scope. In this form, it does not get injected.</p> 
 
</div>

Sử dụng tiêm

Khi bạn có một mô-đun khác nhau cho mỗi và mọi chỉ thị hoặc bộ điều khiển, mỗi người phải được tiêm vào định nghĩa module của ứng dụng. Điều này khiến rất nhiều chỗ bị lỗi. Cách tốt nhất là chỉ tạo mô-đun mới khi cần và tạo mô-đun cho một nhóm chức năng liên quan chứ không phải một mục duy nhất.

Mã bên dưới thể hiện việc tiêm thích hợp.

angular.module("MyApp", ['ReusableDirectives']); 
 
angular.module("MyApp").directive("myDirective", function(){ 
 
    return { 
 
    restrict: "AE", 
 
    scope: { name: "@" }, 
 
    template: "<p>This is the directive I defined in the example above. It uses <u>the same module</u> as my main application, because it is not going to be reused over and over again. In fact, I will need it just for this application, so I don't need to complicate things with a new module. This directive takes an attribute called 'name' and if it is a string allows me to manipulate the string within my templates scope to do things like this: {{'hello ' + name + '!'}}</p>" 
 
    }; 
 
}); 
 
angular.module("ReusableDirectives", []); 
 
angular.module("ReusableDirectives").directive("reusableDirective", function(){ 
 
    return { 
 
    restrict: "E", 
 
    template: "<p>This is a directive that I intend to use in many, many applications. Because I will reuse it so much, I am putting it in a separate module from my main application, and I will inject this directive. This is the only reason that this directive is not in the same module as the one I defined above.</p>" 
 
    }; 
 
}).directive("reusableDirective2", function(){ 
 
    return { 
 
    restrict: "E", 
 
    template: "<p>This is a second directive that I intend to use in multiple applications. I have stored it in a module with the first directive so that I can freely inject it into as many apps as I like.</p>" 
 
    }; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="MyApp"> 
 
    <h1>Successful Load</h1> 
 
    <my-directive name="Johnny"></my-directive> 
 
    <p>By applying the directive definition to the MyApp module, the MyApp module knows to activate the directive within this scope. In this form, it does not get injected.</p> 
 
    <h3>Injected Directives</h3> 
 
    <reusable-directive></reusable-directive> 
 
    <reusable-directive2></reusable-directive2> 
 
</div>

Giữ nó đơn giản. Xác định chỉ thị của bạn trên một mô-đun duy nhất cho ứng dụng của bạn. Một khi bạn đã làm xong và làm việc, nếu bạn cần các chỉ thị một lần nữa trong một ứng dụng khác, refactor và thử nghiệm với tiêm tại thời điểm đó sau khi bạn có một số thực hành góc hơn theo vành đai của bạn.

Bạn có tương lai tươi sáng với Angular, hãy tiếp tục công việc tốt!