AngularJS directive link function not working

Question

AngularJS directive link function not working

I'm playing around with directives in AngularJS and have trying both the shorthand directive style (returning only the link function) and the longhand style (returning all or part of a directive definition object.

Unfortunately, I've only been able to get the directive working (which activates a jQuery popup) using the shorthand way defined in popup2. The longhand popup2 directive doesn't seem to work at all, and in particular the link function in my definition object is never called. What do I need to do to make this explicit link declaration to work?

javascript
angularjs

Answer 1

Both of your directives work with a small tweak to reuse the same module when creating the directives instead of overwriting the first one. See this fiddle.

Instead of doing:

angular.module("app", []).directive('popover1'...

angular.module("app", []).directive('popover2'...

Do something like this:

var module = angular.module("app", []);

module.directive('popover1'...

module.directive('popover2'...

Edit: after looking at the docs I see you can do something similar to the original post as well like this:

angular.module('app', []).directive('popover1'...

angular.module('app').directive('popover2'...

Omit the second parameter [] in subsequent calls after the first to angular.module to configure an existing module.

Answer 2

And why the link function isnt called here?:

<div ng:app="app">
<div>
    <p test="">Hello!</p>
</div>

var module = angular.module("app", []);

module.directive('test', function() {
return {
        restrict: '',
        link: function () {
            console.log('linkfn');
        },
        compile: function() {
            console.log('compile');
        }
    };

});

fiddle: http://jsfiddle.net/ZWLzb/