jcarpenter jcarpenter - 5 months ago 29
AngularJS Question

AngularJS Link function not called

I'm trying to write my first AngularJS directive: one involving the

link
function. The directive is being loaded, but when I use it in my page the
link
function is not called.




Here's the fiddle: http://jsfiddle.net/jCUSh/115/

Here's the HTML:

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


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





I'll bet I'm doing some simple thing wrong.

Answer

The default for angular is to assume that directives are attributes, not elements! You are using a directive as an element so you need to specify this with the restrict. The updated code reads:

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

Note the restrict: 'E',. Best of luck!

Updating your fiddle: http://jsfiddle.net/j8ZZ4/