我对 AngularJS 和指令 ng-repeat 有疑问,我不知道出了什么问题。我正在使用 angular-ui-tree ( https://github.com/angular-ui-tree/angular-ui-tree ) 来构建一个无限嵌套树。树的第一级将由我的代码构建,但如果我将我的孩子附加到现有节点,则会发生无限循环错误。
所以这是我的代码(很抱歉,我无法让 jsfiddle 运行......)
HTML
<html ng-app='test'>
<head>
<link rel="stylesheet" href="bootstrap.min.css"/>
<link rel="stylesheet" href="bootstrap-theme.min.css"/>
<link rel="stylesheet" href="angular-ui-tree.min.css"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script src="angular.js"></script>
<script src="angular-ui-tree.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<script type='text/ng-template' id="nodes_renderer.html">
<div class='tree-node tree-node-content'>
<button data-nodrag ng-click="toggle(this)" class="btn btn-xs btn-success glyphicon glyphicon-chevron-down"></button>
<span>{{node.title}}</span>
<button data-nodrag ng-click="upper(this)" ng-disabled="enableBtnUpper(this)" class="btn btn-xs btn-success glyphicon glyphicon-chevron-up"></button>
<button data-nodrag ng-click="lower(this)" ng-disabled="enableBtnLower(this)" class="btn btn-xs btn-danger glyphicon glyphicon-chevron-down"></button>
</div>
<ol ui-tree-nodes="" ng-model="node.items">
<li ng-repeat="subItem in node.items" ui-tree-node ng-include="'nodes_renderer.html'"></li>
</ol>
</script>
<div id='tree-root' ui-tree data-no-drag ng-controller='PageStructureController'>
<ol ui-tree-nodes ng-model='structure'>
<li ng-repeat='node in structure', ui-tree-node ng-include="'nodes_renderer.html'"></li>
</ol>
</div>
</body>
</html>
和我的角度控制器:
angular.module('test', ['ui.tree'])
.controller('PageStructureController' , ['$scope', function($scope) {
$scope.structure = [{id:"1", items:[]}];
$scope.lower = function(scope) {
var nodeData = scope.$modelValue;
nodeData.items.push({id: "25", items: []})
};
$scope.upper = function(scope) {
};
// TODo
$scope.enableBtnLower = function(scope) {
}
$scope.enableBtnUpper = function(scope) {
};
$scope.toggle = function (scope) {
};
}]);
从其他问题中,我发现角度贯穿我的范围,找到了一个新对象->再次通过我的范围运行->找到了一个新对象等等..但我无法弄清楚问题发生在哪里。我知道在较低的函数中创建了一个新对象,但它与他们的示例中的代码相同(https://github.com/angular-ui-tree/angular-ui-tree/tree/master/examples -> 参见基本示例)
我希望你能帮帮我 :-)