没有调用AngularJS Link函数

Question

我正在尝试编写我的第一个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");
        }
    };
});

我敢打赌,我做错了一些简单的事情.

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

这不是您的情况，但当您的指令命名不正确时，可能会出现同样的问题。尤其要注意名称中的破折号。由于 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')} ))