AngularJS Link function not called

Question

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.

Solution 1

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/

Solution 2

It is not your case, but the same issue might occur when the naming of your directive is not correct. Be especially careful to dashes in the name. Since angular automagically transforms between them, it's a very very common mistake.

consider this template

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

with this directives.

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

Solution 3

I had a different problem: an ng-include in the same element was trying to include an empty string ("") and so didn't let the directive link(), for some reason.

By having a page available in the ng-include, the link() was called as expected.

Solution 4

Another reason this could happen for people is that there is a runtime error in one of the other compilation phases for the directive.

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

View more solutions

Comments

[jcarpenter2]

Thanks, that worked. The reason I was confused is that if I removed the <google-maps-symbol> element from my fiddle, the first console.log statement was not executed. So it looked like Angular was interpreting the element as a directive like I expected. It all makes sense now.