Javascript 如何在角度指令内定义角度指令'；s链接功能？

但是，我想在link函数内部创建一个角度指令；无法编译创建的指令

请参阅此JSFIDLE：

在全局空间中取消对该指令的注释将按预期工作

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

但是link函数中完全相同的代码失败了

我之所以要这样做，是因为我希望用户（将成为我自己）能够通过一个id属性向我的主指令提供一个脚本标记的id，而主指令将创建一个带有“remove”方法的“wrapper”指令。这样，在脚本标记中，只需实现“删除”即可。

查看此小提琴：

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

所以如果给它一个模板，

就变成了

。如果没有模板，没有任何东西真正针对DOM构建指令，它只是变为空，但是如果需要，您仍然可以运行jquery脚本

想象一下，当你的应用程序加载时，它会注册所有与相关模板绑定的指令。然后，应用程序通过将任何类型的事件绑定到新建立的DOM来“编译”这些指令。此时，如果在应用程序加载期间未注册任何指令，则编译函数将忽略它。在您的例子中，您尝试在应用程序加载之后和编译期间绑定“test”指令

这种机制类似于jquery的“on”工作原理。当您对已加载的DOM元素执行“单击”事件时，会触发此事件。但是，当DOM完成后加载html时，除非使用“on”，否则没有任何效果

平心而论，angular的开发人员确实提到了处理方向的学习曲线是如何陡峭的，并将对其进行修改，使其在2.0中变得更加容易。您可以在以下博客中阅读：

不管怎样

这是html的外观：

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

---

您的模板URL。。应该指向一个html文件名，所以它应该是“myform.html”，因为这是html模板的位置。我认为这只取决于脚本标记的id。脚本标记的id是myform，我确认它可以工作。所以您希望最终的html脚本像这样吗？是的，除了应该编译成表单之外。您知道，每个指令都会针对您的应用程序生成自己的“html”标记。你不能简单地让一个指令像你现在做的那样做出另一个指令。您必须定义每个元素来表示一组相互独立的基本html元素。链接和编译用于直接操作DOM，它不执行将新指令绑定到DOM的过程。

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