Question

我正在尝试使用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', 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");
        }
    };
});

Treeview模板：

<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被硬编码用于开发 - 最终我希望这将来自从服务器提取数据的控制器/服务。然而，它代表了我正在寻找的那种基本结构。

当我在treeviewItem中运行没有嵌套ul时，它给了我前三个项目就好了。当我添加ul in以尝试让控件与子项绑定时，它会移动页面并停止工作。

JSFiddle没有嵌套的ul - 工作：

http://jsfiddle.net/BdmV3/

JSFiddle与嵌套ul - 不工作（可能会挂起你的浏览器！）：

http://jsfiddle.net/SKPpv/

我应该如何制作一个使用自定义指令和ngRepeat创建可能无限级别的递归的控件？为什么我的方法不起作用？

Answer 1

问题是你试图递归地定义你的指令，当angular尝试编译模板时，它看到了treeview指令，它调用了treeview的编译函数，然后它看到了treeviewItem指令，它调用了treeviewItem的编译函数，然后它看到了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>',
        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 https://stackoverflow.com/a/11861030/69172上显示树状数据的解决方案。然而，该解决方案使用ngInclude而不是指令。

使用ngRepeat的递归自定义指令

1 个答案: