Chức năng AngularJS Link không được gọi là

Question

Tôi đang cố gắng viết lệnh AngularJS đầu tiên của mình: một liên quan đến hàm link. Chỉ thị đang được tải, nhưng khi tôi sử dụng nó trong trang của tôi, chức năng link không được gọi.

Đây là fiddle: http://jsfiddle.net/jCUSh/115/

Đây là HTML:

<div ng-app="biApp"> 
    <google-maps-symbol></google-maps-symbol> 
</div> 

và JavaScript:

var appModule = angular.module('biApp', []); 

appModule.directive('googleMapsSymbol', function() { 
    console.log("Directive was run"); 
    return { 
     link: function (scope, elem, attrs) { 
      console.log("Link was called"); 
     } 
    }; 
}); 

Tôi đặt cược Tôi đang làm một số điều đơn giản sai.

Answer 1

Giá trị mặc định cho góc là giả định rằng chỉ thị là attributes, không phải elements! Bạn đang sử dụng một chỉ thị như một phần tử, do đó bạn cần phải xác định điều này với các giới hạn. Mã được cập nhật lần đọc:

appModule.directive('googleMapsSymbol', function() { 
    console.log("Directive was run"); 
    return { 
     restrict: 'E', 
     link: function (scope, elem, attrs) { 
      console.log("Link was called"); 
     } 
    }; 
}); 

Lưu ý restrict: 'E',. May mắn nhất!

Đang cập nhật fiddle của bạn:http://jsfiddle.net/j8ZZ4/

Answer 2

Tôi đã có một vấn đề khác nhau: một ng-include trong cùng một nguyên tố đã cố gắng để bao gồm một chuỗi rỗng ("") và do đó đã không để chỉ thị link(), vì một lý do .

Bằng cách có một trang có sẵn trong ng-include, số link() được gọi như mong đợi.

Answer 3

Nó không phải là trường hợp của bạn, nhưng vấn đề tương tự có thể xảy ra khi đặt tên của chỉ thị của bạn là không chính xác. Đặc biệt cẩn thận để gạch ngang trong tên. Vì góc cạnh tự động biến đổi giữa chúng, đó là một sai lầm rất phổ biến.

xem xét mẫu này

<div> 
    <div this-wont-work></div> 
    <div this-will-work></div> 
</div> 

với chỉ thị này.

angular 
    .module('biApp') 
    .directive('this-wont-work',() => ({ link:() => console.log('nope')})) 
    .directive('thisWillWork',() => ({ link:() => console.log('works')})) 

Answer 4

Một lý do khác có thể xảy ra với mọi người là có lỗi thời gian chạy ở một trong các giai đoạn biên dịch khác cho chỉ thị.

ng.module(MODULE).directive('myDirective', [() => { 
    return { 
     link() { 
      // Never getting here 
     }, 
     template() { 
      // Error here would mess things up 
     }, 
     controller() { 
      // error here would mess things up 
     } 
    }; 
}]);