遞歸角度指令

遞歸是一種強(qiáng)大的技術(shù)，允許指令創(chuàng)建嵌套元素。然而，在 Angular 指令中使用遞歸會(huì)帶來一些挑戰(zhàn)。

遞歸 Angular 指令的方法

現(xiàn)有解決方案通過兩種主要方式解決此問題：

1. 手動(dòng) HTML 編譯： 這種方法涉及根據(jù)運(yùn)行時(shí)范圍狀態(tài)手動(dòng)編譯 HTML。然而，它帶來了精心管理編譯過程的挑戰(zhàn)。
2. 腳本模板：這種方法避免使用指令，而是利用 <script> 。引用自身的模板。然而，它缺乏指令的參數(shù)化功能，并且嚴(yán)格綁定到新的控制器實(shí)例。</script>

參數(shù)化遞歸模式

為了解決現(xiàn)有方法的局限性，參數(shù)化的遞歸模式可以通過

RecursionHelper 服務(wù)

RecursionHelper 服務(wù)提供了處理遞歸的編譯函數(shù)。它接受一個(gè)元素和一個(gè)鏈接函數(shù)（或具有注冊的預(yù)鏈接函數(shù)和后鏈接函數(shù)的對象）。

module.factory('RecursionHelper', ['$compile', function($compile) {
    return {
        compile: function(element, link) {
            // Remove element contents to break recursion
            var contents = element.contents().remove();

            return {
                pre: link.pre || null,
                post: function(scope, element) {
                    // Compile and re-add contents
                    var compiledContents = $compile(contents);
                    compiledContents(scope, function(clone) {
                        element.append(clone);
                    });

                    // Call post-linking function, if any
                    link.post && link.post.apply(null, arguments);
                }
            };
        }
    };
}]);

RecursionHelper 服務(wù)的使用

RecursionHelper服務(wù)被納入指令作為如下所示：

module.directive("tree", ["RecursionHelper", function(RecursionHelper) {
    return {
        restrict: "E",
        scope: {family: '='},
        template: `
            <p>{{ family.name }}</p>
            <ul>
                <li ng-repeat="child in family.children">
                    <tree family="child"></tree>
                </li>
            </ul>
        `,
        compile: function(element) {
            return RecursionHelper.compile(element);
        }
    };
}]);

此方法的優(yōu)點(diǎn)

• 通過避免不必要的指令來保持 HTML 的整潔。
• 將遞歸邏輯抽象為服務(wù)、增強(qiáng)指令

Angular 1.5 兼容性

在 Angular 1.5.x 及以上版本中，可以直接實(shí)現(xiàn)遞歸，無需 RecursionHelper 服務(wù)，但只能使用模板，不能帶有 templateUrl。

以上是如何有效地實(shí)現(xiàn)遞歸角度指令以及每種方法的優(yōu)點(diǎn)是什么？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！