AngularJS direct link function does not work

Question

http://jsfiddle.net/kz26/kH9wg/

I play with directives in AngularJS and try both the shorthand directive style (returning only the link function) and the longhand style (returning all or part of the directive definition object.

Unfortunately, I managed to get a directive (which activates the jQuery popup) using the shorthand method defined in popup2 . The longhand popup2 directive does popup2 seem to work at all, and in particular, the link function in my definition object is never called. What do I need to make this explicit link declaration work?

Answer 1

Both of your directives work with a little tweaking to reuse the same module when creating directives instead of overwriting the first. See this script .

Instead of this:

 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 that you can do something similar to the original post, ok like this:

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

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

Answer 2

And why is the link function not 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/