Функция AngularJS Link не называется

Я пытаюсь написать свою первую директиву AngularJS: одну, включающую функцию link. Директива загружается, но когда я использую ее на своей странице, функция link не вызывается.

Здесь скрипка: http://jsfiddle.net/jCUSh/115/

Здесь HTML:

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

и 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");
        }
    };
});

Готов поспорить, что я делаю что-то не так.

Ответ 1

По умолчанию для angular предполагается, что директивы attributes, а не elements! Вы используете директиву как элемент, поэтому вам нужно указать это с ограничением. Обновленный код читает:

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

Обратите внимание на restrict: 'E',. Удачи!

Обновление вашей скрипки: http://jsfiddle.net/j8ZZ4/

Ответ 2

У меня была другая проблема: ng-include в том же элементе пытался включить пустую строку (""), поэтому по какой-то причине не разрешала директиву link().

Имея доступную страницу в ng-include, link() вызывается как ожидалось.

Ответ 3

Это не ваше дело, но такая же проблема может возникнуть, когда именование вашей директивы неверно. Будьте особенно осторожны с тире в имени. Поскольку angular автоматически преобразуется между ними, это очень распространенная ошибка.

рассмотрим этот шаблон

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

с этими директивами.

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

Ответ 4

Другая причина, которая может случиться для людей, заключается в том, что на одной из других фаз компиляции для директивы есть ошибка времени выполнения.

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