我有一个递归模板来显示这样的菜单节点:
<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:[]
}
]
}
];
它正在运作。
但我会在这棵树下添加多个子图层。所以我无法解决这个问题。