Question

我想在链接函数中创建一个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，这将依次创建一个'包装器'带有'删除'方法的指令。这样，在脚本标记中，所有需要做的就是实现“删除”。

Answer 1

看看这个小提琴：

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();
            }
        }
    }
});

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

1 个答案: