angularjs递归模板最大调用堆栈大小错误与第三方对象

时间:2015-09-03 09:10:32

标签: javascript angularjs recursion

我有一个递归模板来显示这样的菜单节点:

<div ng-app="app" ng-controller="TreeController">
    <script type="text/ng-template"  id="tree_item_renderer.html">
        <button  ng-if="data.nodes" ng-click="toggle(data)">o</button>       
         <span >{{data.name}}</span>
        <ul>
            <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
        </ul>
    </script>

    <ul >
        <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</div>

我的angularjs控制器是这样的:

angular.module("app", [])

.controller("TreeController", ['$scope', function($scope) {
    $scope.tree = [
        {
            name: "Node-1",
            layer: new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'}),
            nodes: [
                {
                    name: "Node-1 Sublayer",
                    layer: new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'}),
                    nodes:[]
                }
            ]
        }
    ];

    $scope.toggle = function(node){
        node.layer.visibility = !node.layer.visibility;
    };
}]);

OpenLayers.Layer.WMS是第三方框架对象。我的工作DEMO is like here

1 - 当我在递归模板中添加带有span元素的ng-class="data.nodes"指令时,

<div ng-app="app" ng-controller="TreeController">
    <script type="text/ng-template"  id="tree_item_renderer.html">
        <button  ng-if="data.nodes" ng-click="toggle(data)">o</button>       
         <span ng-class="{'layer-name': data.nodes, 'layer-title':!data.nodes}">{{data.name}}</span>
        <ul>
            <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
        </ul>
    </script>

    <ul >
        <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</div>

我收到这样的错误:

  

超出最大调用堆栈大小

2 - 如果我从我的tree子节点中删除图层对象,请执行以下操作:

   $scope.tree = [
        {
            name: "Node-1",
            layer: new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'}),
            nodes: [
                {
                    name: "Node-1 Sublayer",
                    nodes:[]
                }
            ]
        }
    ];
  

它正在运作。

但我会在这棵树下添加多个子图层。所以我无法解决这个问题。

0 个答案:

没有答案