Chỉ thị AngularJS không được gọi là

Question

Tôi đang cố gắng triển khai chỉ thị d3 trong Angular và rất khó bởi vì không có gì xảy ra trực quan và không có lỗi nào bị ném trên bảng điều khiển.

Dưới đây là chỉ thị d3 của tôi:

myApp.directive('d3-bars', ['d3Service', function($window, d3Service) { 
    return { 
    restrict: 'EA', 
    scope: {}, 
    link: function(scope, element, attrs) { 

// More code below .... 

Đây là HTML của tôi:

<d3-bars bar-height="20" bar-padding="5"></d3-bars> 

Lúc đầu, tôi nghĩ rằng nó đã không phụ thêm một svg, bởi vì kiểm tra các yếu tố đó là những gì nó trông giống như, nhưng bây giờ tôi không nghĩ rằng chỉ thị này thậm chí còn chạy cả. Tôi bị kẹt bên trong nó ngay từ đầu và nó cũng không xuất hiện. Tôi thiếu một cái gì đó đơn giản?

EDIT:

tôi đã cố gắng thay đổi dòng trên xuống

angular.module('myApp.directives', ['d3']) 
.directive('d3-bars', ['d3Service', function($window, d3Service) { 

Nhưng điều đó không làm việc, hoặc. Tôi thậm chí không biết sự khác biệt giữa hai tiêu đề là gì ...

Answer 1

Tên chỉ thị của bạn có thể sai. Các chỉ thị góc thường được gắn camel. Và khi trong HTML chúng bị thôi miên. để ngClass chuyển thành ng-class trong HTML.

Ít nhất khi tôi đã cố gắng sử dụng - hoặc các ký tự khác trong chỉ thị của tôi, nó không hoạt động.

Kiểm tra thuộc Tập đoàn Google sau này đối với một số giá trị: using dash in directive

Ngoài ra đây là những tài liệu: Directives - matching directives

Bạn cũng sẽ muốn làm cho sự thay đổi đó đã được đề xuất trong các ý kiến ​​của JoshSGman:

.directive('d3Bars',['$window', 'd3Service', function($window, d3Service) { 

Answer 2

việc đặt tên chỉ thị của bạn là vấn đề. Angular bình thường hóa tên của các chỉ thị trong html trước khi nó khớp với các tên trong JavaScript. Quá trình chuẩn hóa hoạt động theo hai bước:

1. Dải x và dữ liệu - từ mặt trước của phần tử/thuộc tính.
2. Chuyển đổi tên dấu hai chấm, dấu gạch nối, hoặc gạch dưới dấu gạch chân thành camelCase.

Vì vậy, tên chính xác cho chỉ thị của bạn trong JavaScript sẽ là d3Bars. Thay đổi nó thành cái đó và nó sẽ hoạt động.

Xem https://docs.angularjs.org/guide/directive#matching-directives để biết thêm thông tin.

Answer 3

Tôi đã có hành vi tương tự khi tôi quên xác định thuộc tính link.

Không có lỗi trong bảng điều khiển, nothin.