javascript - 是否可以在自身内部引用 Angular 自定义指令？

Question

希望在 Angular 中实现文件夹层次结构:

我通过在模板中引用自身的自定义指令来实现这一点。

目前，此设置将进入无限循环:

<!-- index.html -->
<subfolders folder="default_folder"></subfolders>

这是 <subfolders>指令:

//subfoldersDirective.js
angular.module('app').directive('subfolders', subfolders);
function subfolders() {

    var directive = {
        restrict: 'AE',
        scope: {
            folder: '=',
        },
        templateUrl: '/pathto/subfoldersDirective.html',
        controller: DirCtrl,
        controllerAs: 'vm'
    };

    return directive;

    function DirCtrl($scope) {
        var vm = this;
        vm.folder = $scope.folder;
    }

}

及其模板:

<!-- folderDirective.html -->
<div ng-repeat="folder in vm.folder.subfolders">
    {{ folder.name }}
    <button ng-click="folder.is_open = true">Open folder</button>
    <div ng-if="folder.is_open">
       <!-- This is the problem line -->
       <subfolders folder="folder"></subfolders>
    </div>
</div>

在模板中，<subfolders>应该只在单击触发 ng-if="folder.is_open" 的按钮后呈现.我猜 Angular 在编译指令时并不知道这一点。它进入了无限循环，尽管从技术上讲它不应该。

有没有办法让它与指令一起工作？实际应用程序中的逻辑有点复杂，这就是为什么我希望让它与指令一起工作。

我目前使用的是 Angular 1.2.26。

Answer 1

你可以这样做，但你需要覆盖指令的编译行为。您需要在编译步骤中删除指令元素的内容，然后在后链接步骤中编译并重新附加它。我已经成功地使用了下面的编译函数:

function compile(element) {
    var contents = element.contents().remove();
    var contentsLinker;

    return function (scope, iElement) {
        if (angular.isUndefined(contentsLinker)) {
            contentsLinker = $compile(contents);
        }

        contentsLinker(scope, function (clonedElement) {
            iElement.append(clonedElement);
        });
    };
}

我将此功能基于 this post ，如果您需要预链接功能，这可能会更全面。