遞歸Angular 指令引發了許多討論，解決方案分為兩類：
這種方法涉及根據運行時範圍狀態增量來建立HTML。然而，它的缺點是無法刪除已編譯的程式碼以及手動管理編譯過程的複雜性。 腳本模板此方法使用 <script>引用自身的模板，有效地避免了指令限制。然而，它犧牲了參數化並綁定到新的控制器實例。 <h3>改進的解決方案：遞歸助理服務<p>受現有解決方案的啟發，一種更優雅的方法涉及創建一個抽象的遞歸助手服務遞歸功能。它的工作原理如下：<pre class="brush:php;toolbar:false">module.factory('RecursionHelper', ['$compile', function($compile){ return { compile: function(element, link){ var contents = element.contents().remove(); var compiledContents; return { pre: link && link.pre ? link.pre : null, post: function(scope, element){ if (!compiledContents) { compiledContents = $compile(contents); } compiledContents(scope, function(clone){ element.append(clone); }); if (link && link.post) { link.post.apply(null, arguments); } } }; } }; }]);<p>此幫助程式服務允許手動編譯元素，從而打破遞歸循環。它接受一個元素和一個連結函數作為參數，並傳回用於預編譯和後編譯的連結函數。 <h3>用法<p>遞歸助手服務可以在指令中使用，如下所示：<pre class="brush:php;toolbar:false">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); } }; }]);<h3>優點<p>此解決方案非常出色因為：<ul><li>它消除了對專門指令的需要，降低了HTML 複雜性。 <li>遞歸邏輯封裝在 Recursion Helper 服務中，從而產生更清晰的指令。 <h3>更新<p>對於 Angular 1.5.x 及更高版本，遞歸使用模板時指令開箱即用。但是，在使用範本 URL 時，它們仍然需要 Recursion Helper 服務。 <🎜></script>
以上是我們如何有效處理 Angular 指令中的遞迴？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
