无法在ng-repeat中显示ng-template

时间:2015-03-16 16:55:33

标签: javascript angularjs

我试图ng-repeat显示来自ng-template的项目,但它不会显示任何项目。怎么会这样?

<script type="text/ng-template" id="tree_renderer">
    <span>
        {{e.name}}
    </span>
</script>

<div class="tree">
    <ul>
        <li ng-repeat="e in items"  ng-include="'tree_renderer'"></li>
        <li ng-repeat="e in items">
            {{e.name}}
        </li>
    </ul>
</div>


'use strict';

angular.module('nodeTreeApp')
  .controller('NodeCtrl', function ($scope, $dialog, $http) {
    $scope.items = [
        {
            "name": "Root",
            "type_name": "Node",
            "show": true,
            "nodes": [{
                "name": "Loose",
                "group_name": "Node-1",
                "show": true,
                "nodes": [{
                    "name": "Node-1-1",
                    "device_name": "Node-1-1",
                    "show": true,
                    "nodes": []
                }, {
                    "name": "Node-1-2",
                    "device_name": "Node-1-2",
                    "show": true,
                    "nodes": []
                }, {
                    "name": "Node-1-3",
                    "device_name": "Node-1-3",
                    "show": true,
                    "nodes": []
                }]
            }, {
                "name": "God",
                "group_name": "Node-2",
                "show": true,
                "nodes": [{
                    "name": "Vadar",
                    "device_name": "Node-2-1",
                    "show": true,
                    "nodes": []
                }]
            }, {
                "name": "Borg",
                "group_name": "Node-3",
                "show": true,
                "nodes": []
            }, {
                "name": "Fess",
                "group_name": "Node-4",
                "show": true,
                "nodes": []
            }]
        }
    ];
});


'use strict';

angular.module('nodeTreeApp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('node', {
        url: '/node',
        templateUrl: 'app/node/node.html',
        controller: 'NodeCtrl'
      });
  });

1 个答案:

答案 0 :(得分:1)

您应该在模板.htmlid中使用ng-include

我基于(有点)你提供的代码制作了这个例子:http://jsbin.com/qodayesigo/1/

<强>更新

要显示子节点,您需要嵌套的ng-repeat,请查看this example