使用ngRepeat递归定制指令 [英] Recursive custom directives using ngRepeat

问题描述

我试图创建一个使用AngularJS一个TreeView。

I'm trying to create a treeview using AngularJS.

下面是我的code：

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', function () {
    return {
        restrict: 'E',
        templateUrl: "/templates/ui/controls/treeview-item.htm",
        replace: true,
        scope: {
            item: "="
        },
        link: function (scope, element, 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项模板：

Treeview Item template:

<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>

在树形指令 $ scope.items 是艰苦codeD - 最终我希望这将来自控制器/服务从服务器获取数据。然而，它重新presents排序我在寻找的基本结构。

In the treeview directive $scope.items is hardcoded for development - eventually I hope this will come from a controller/service pulling data from the server. However it represents the sort of basic structure I'm looking for.

当我运行这个无树型视图嵌套UL它给我的前三个项目就好了。当我添加了UL，试图让控件与子项绑定手页面并停止工作。

When I run this without the nested ul in treeviewItem it gives me the first three items just fine. When i add the ul in to try and get the controls to bind with child items it hands the page and stops working.

的jsfiddle没有嵌套的UL - 工作：

JSFiddle without nested ul - working:

http://jsfiddle.net/BdmV3/

的jsfiddle嵌套UL - 不工作（！并且可能会挂起您的浏览器）：

JSFiddle with nested ul - not working (and may hang your browser!):

http://jsfiddle.net/SKPpv/

我应该如何去制作使用自定义指令，并ngRepeat创建递归的可能是无限水平控制？为什么不是我的工作方式？

How should I go about making a control that uses a custom directive and ngRepeat to create potentially infinite levels of recursion? Why isn't my approach working?

推荐答案

的问题是，你想递归定义你的指令，当角试图编译模板，它看到树视图指令，它被称为树状的编译功能，那么它看到树型视图指令，它呼吁树型视图的编译功能，那么它看到树型视图指令，它被称为树型视图的编译功能，那么它看到树型视图指令，它被称为树型视图的编译功能..

The problem is that you're trying to define your directive recursively, when angular was trying to compile the template, it saw treeview directive, it called treeview's compile function, then it saw treeviewItem directive, it called treeviewItem's compile function, then it saw treeviewItem directive, it called treeviewItem's compile function,then it saw treeviewItem directive, it called treeviewItem's compile function...

看到这个问题？这些调用编译功能无法停止。所以，你需要拉递归定义出你的模板，而是使用 $编译来建立DOM手动：

See the problem? The calls to compile functions couldn't stop. So, you need to pull the recursive definition out of your template, but use $compile to build DOM manually:

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>',
        replace: true,
        scope: {
            item: "="
        },
        link: function (scope, element, 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 http://stackoverflow.com/a/11861030/69172显示树状数据。然而，该解决方案使用 ngInclude 而不是指令。

Alternatively, I found a solution to display tree-like data on SO http://stackoverflow.com/a/11861030/69172. The solution however uses ngInclude instead of directives.

这篇关于使用ngRepeat递归定制指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！