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

Question

我想在链接函数内部创建一个角度指令。 创建的指令无法编译。

看到这个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，这反过来将创建一个“ wrapper”指令，一种“删除”方法。 这样，在script标记中，所有要做的就是实现“删除”。

Answer 1

看看这个小提琴：

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

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

因此，如果给它提供模板，则<test></test>变为<div></div> 。 如果没有模板，则没有任何东西可以真正针对DOM构建指令，它只是变成空的，但是您仍然可以根据需要运行jquery脚本。

像这样想，当您的应用程序加载时，它会注册所有要与关联模板绑定的指令。 然后，应用程序通过将任何类型的事件绑定到新建立的DOM来“编译”那些指令。 此时，如果在应用程序加载期间未注册任何指令，则编译功能将忽略该指令。 在您的情况下，您尝试在应用程序加载之后和编译期间绑定“ test”指令。

这种机制类似于jquery的“ on”工作方式。 当您在已加载的DOM元素上执行“ click”事件时，将触发此事件。 但是，当您在DOM完成后加载html时，除非您使用“ on”，否则任何操作均无效。

公平地说，angular的开发人员确实提到了如何处理陡峭的学习曲线，并将对其进行修订以使其在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();
            }
        }
    }
});