Question

我试图编写我的第一个AngularJS指令：一个涉及link函数。正在加载该指令，但是当我在页面中使用它时，不会调用link函数。

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

我打赌我做错了一些简单的事情。

Answer 1

angular的默认值是假设指令是attributes，而不是elements！您正在使用指令作为元素，因此您需要使用restrict指定它。更新后的代码为：

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/

Answer 2

我有一个不同的问题：同一个元素中的ng-include试图包含一个空字符串（""），所以由于某种原因没有让指令link()

通过在ng-include中提供网页，link()按预期调用。

Answer 3

这不是您的情况，但是当您的指令命名不正确时，可能会出现同样的问题。 要特别注意名称中的破折号。由于角度自动在它们之间进行转换，因此这是一个非常常见的错误。

考虑这个模板

<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')} ))

Answer 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
        }
    };
}]);

没有调用AngularJS Link函数

4 个答案: