AngularJS directive link function not working

Question

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?

Gloopy · Accepted Answer · 2012-07-25 22:17:35Z

9

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.

edited Jul 25, 2012 at 22:17

answered Jul 24, 2012 at 4:11

Gloopy

37.8k15 gold badges105 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Niborb Over a year ago

I had the same problem, reusing the module by omitting the second parameters is indeed the solution.

Luckylooke · Accepted Answer · 2013-09-02 19:10:03Z

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/

answered Sep 2, 2013 at 19:10

Luckylooke

4,6694 gold badges39 silver badges61 bronze badges

1 Comment

bobber205 Over a year ago

The code in your fiddle looks the same as the one you posted in your response.

Collectives™ on Stack Overflow

AngularJS directive link function not working

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related