我们如何有效处理 Angular 指令中的递归？-js教程-PHP中文网

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

Mary-Kate Olsen

发布： 2024-12-05 20:56:11

原创

412 人浏览过

How Can We Effectively Handle Recursion in Angular Directives?

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 &amp;&amp; link.pre ? link.pre : null,
                post: function(scope, element){
                    if (!compiledContents) {
                        compiledContents = $compile(contents);
                    }
                    compiledContents(scope, function(clone){
                        element.append(clone);
                    });
                    if (link &amp;&amp; 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);
        }
    };
}]);

登录后复制