是否可以在自身内部引用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，如果您需要预链接功能，这可能会更全面。