是否可以在自身内部引用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);
        });
    };
}

我在这篇文章中基于此功能，如果您需要预链接功能，则可能更全面。