如何在角度指令的链接函数中定义角度指令?

时间:2014-08-19 15:19:58

标签: javascript angularjs angularjs-directive

我想在链接函数中创建一个angular指令;创建的指令无法编译。

请参阅此JSFiddle:http://jsfiddle.net/v47uvsj5/5/

在全局空间中取消注释此指令可以按预期工作。

app.directive('test', function () {
    return {
        templateUrl: 'myform', // wraps script tag with id 'myform'
        restrict: 'E',
        require: "^mydir",
        replace: true,
        scope: {
        },
        link: function (scope, element, attrs, mydirCtrl) {
            scope.remove = function () {
                element.remove();
                mydirCtrl.remove();
            }
        }
    }
});

但链接功能中完全相同的代码失败。

我想要这样做的原因是因为我希望用户(他将成为我自己)能够通过id属性仅向我的main指令提供脚本标记的id,这将依次创建一个'包装器'带有'删除'方法的指令。这样,在脚本标记中,所有需要做的就是实现“删除”。

1 个答案:

答案 0 :(得分:0)

看看这个小提琴:

http://jsfiddle.net/v47uvsj5/8/

我在这个小提琴中所做的是菊花链你的指令,这是正确的做法。当您的应用程序运行时,它会对您的每个指令进行绑定,并在编译时构建您的html,然后将事件链接到它。将所有指令绑定到DOM后发生链接和编译。

如果你给它一个模板,那么<test></test>会变成<div></div>。如果没有模板,没有真正构建针对DOM的指令,它只会变为空,但如果需要,您仍然可以运行jquery脚本。

可以这样想,当你的应用程序加载时,它会注册所有与相关模板绑定的指令。然后,应用程序然后通过将任何类型的事件绑定到新建立的DOM来“编译”这些指令。此时,如果在app加载期间没有注册指令,则编译函数会忽略它。在您的情况下,您尝试在应用程序加载后以及编译期间绑定'test'指令。

这种机制类似于jquery的“on”如何工作。当您在已加载的DOM元素上执行“单击”事件时,会触发此事件。但是当您在DOM完成后加载html时,除非您使用“on”,否则无效。

公平地说,角度的开发者确实提到了如何处理方向的陡峭学习曲线,并将进行修订以使其在2.0中更容易。您可以在此博客中阅读相关内容:Angular-2.0

反正,

这就是你的HTML应该是这样的:

<mydir><test></test></mydir>

这就是菊花链的方式:

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

app.directive('mydir', function ($compile, $templateCache) {
    return {
        template: '',
        restrict: 'E',
        controller: function () {
           console.log("got it!");
        }
    }
}).directive('test', function () {
    return {
        templateUrl: 'myform',
        restrict: 'E',
        require: "^mydir",
        replace: true,
        scope: {
        },
        link: function (scope, element, attrs, mydirCtrl) {
            scope.remove = function () {
                element.remove();
                mydirCtrl.remove();
            }
        }
    }
});