我们如何有效处理 Angular 指令中的递归？

Angular 指令中的递归

递归 Angular 指令引发了许多讨论，解决方案分为两类：

手动 HTML 编译

这种方法涉及根据运行时范围状态增量构建 HTML。然而，它的缺点是无法删除已编译的代码以及手动管理编译过程的复杂性。

脚本模板

此方法使用 <script>引用自身的模板，有效地避免了指令限制。然而，它牺牲了参数化并绑定到新的控制器实例。</script>

改进的解决方案：递归助手服务

受现有解决方案的启发，一种更优雅的方法涉及创建一个抽象的递归助手服务递归功能。它的工作原理如下：

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);
                    }
                }
            };
        }
    };
}]);

此帮助程序服务允许手动编译元素，从而打破递归循环。它接受一个元素和一个链接函数作为参数，并返回用于预编译和后编译的链接函数。

用法

递归助手服务可以在指令中使用，如下所示：

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);
        }
    };
}]);

优点

此解决方案非常出色因为：

• 它消除了对专门指令的需要，降低了 HTML 复杂性。
• 递归逻辑封装在 Recursion Helper 服务中，从而产生更清晰的指令。

更新

对于 Angular 1.5.x 及更高版本，递归使用模板时指令开箱即用。但是，在使用模板 URL 时，它们仍然需要 Recursion Helper 服务。

以上是我们如何有效处理 Angular 指令中的递归？的详细内容。更多信息请关注PHP中文网其他相关文章！