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

我在這篇文章中基於此功能，如果您需要預鏈接功能，則可能更全面。