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.

Answer 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/