angularjs – 使用ngRepeat的递归自定义指令

发布时间：2020-12-17 09:56:37 所属栏目：安全来源：网络整理

导读：我正在尝试使用AngularJS创建一个树视图. 这是我的代码： module.directive('treeview',function () { return { restrict: 'E',templateUrl: "/templates/ui/controls/treeview.htm",replace: true,transclude: true,scope: {},link: function (scope,elemen

我正在尝试使用AngularJS创建一个树视图.

这是我的代码：

module.directive('treeview',function () {
    return {
        restrict: 'E',templateUrl: "/templates/ui/controls/treeview.htm",replace: true,transclude: true,scope: {},link: function (scope,element,attrs) {
            console.log("treeview directive loaded");
        },controller: function ($scope,$rootScope) {
            $rootScope.depth = 0;
            $scope.items = [
                { text: "face" },{ text: "palm" },{
                    text: "cake",childitems: [
                        { text: "1 face" },{ text: "1 palm" },{ text: "1 cake" }
                    ]
                }
            ];
        }
    };
});

module.directive('treeviewItem',templateUrl: "/templates/ui/controls/treeview-item.htm",scope: {
            item: "="
        },attrs) {
            console.log("treeview item directive loaded");
        }
    };
});

树视图模板：

<div class="sl-treeview">
    <ul class="clear" ng-transclude>
        <treeview-item ng-repeat="item in items" item="item"></treeview-item>
    </ul>
</div>

Treeview项目模板：

<li>
    <i class="icon-plus-sign"></i>
    <a href="/">
        <i class="icon-folder-close"></i>
        {{item.text}}
    </a>
    <!-- This ul is the issue - it crashes the page -->
    <ul>
        <treeview-item ng-repeat="childitem in item.childitems" item="childitem"></treeview-item>
    </ul>
</li>

在treeview指令$scope.items是硬编码的开发 – 最终我希望这将来自一个控制器/服务从服务器拉取数据.然而,它代表了我正在寻找的基本结构.

当我运行这个没有嵌套的ul在treeviewItem它给我的前三个项目就好了.当我添加ul来尝试和控制绑定与子项目,它交给页面并停止工作.

JSFiddle没有嵌套的ul工作：

http://jsfiddle.net/BdmV3/

JSFiddle嵌套ul – 不工作(可能会挂起你的浏览器！)：

http://jsfiddle.net/SKPpv/

我应该如何进行使用自定义指令和ngRepeat的控制来创建潜在的无限级别的递归？为什么我的方法不行？

问题是你试图递归地定义你的指令,当角度试图编译模板时,它看到了treeview指令,它被称为treeview的编译函数,然后看到treeviewItem指令,它叫做treeviewItem的编译函数,它称为treeviewItem的编译函数,它叫做treeviewItem的编译函数…

看到问题？对编译功能的调用无法停止.所以,你需要从你的模板中拉出递归定义,但是使用$compile手动构建DOM：

module.directive('treeviewItem',function ($compile) {
    return {
        restrict: 'E',template: '<li><i class="icon-plus-sign"></i><a href="/"><i class="icon-folder-close"></i>{{item.text}}</a></li>',attrs) {
            element.append($compile('<ul><treeview-item ng-repeat="childitem in item.childitems" item="childitem"></treeview-item></ul>')(scope));

            console.log("treeview item directive loaded");
        }
    };
});

http://jsfiddle.net/SKPpv/3/

或者,我找到了一个在SO https://stackoverflow.com/a/11861030/69172上显示树状数据的解决方案.然而解决方案使用ngInclude而不是指令.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!