AngularJS指令链接功能不起作用

Question

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

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?

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/