使用AngularJS编写动态结构时遇到问题。我基本上有一个树形结构，它可以递归地递减到无穷大。我需要根据这个树构建一个HTML页面，其中树的每个节点都需要根据其类型由特定的HTML模板显示。通过使用override func viewDidLoad() {
super.viewDidLoad()
tblView.delegate = nil
tblView.dataSource = nil
for i in 1...100 {
apiAgent.getAPIData("entry" + String(i), entry: { entry in
self.getData(data: entry)
tblView.delegate = self
tblView.dataSource = self
tblView.reloadData()
})
}
}
和ng-repeat，我可以很容易地做到这一点，除了与变量绑定相关的问题出现之外。
为了更好地解释这种情况，我将使用一个简化的例子。
这是我的控制者：
ng-include其中function testController($scope,$http,$timeout,$window,$state, Data) {
$scope.blocks = []
block1 = {
"type":"block",
"id":1,
"innerblocks":[],
"html":"block1.html"
}
block21 = {
"type":"block",
"id":21,
"innerblocks":[],
"html":"block2.html"
}
block22 = {
"type":"block",
"id":22,
"innerblocks":[],
"html":"block2.html"
}
block1.innerblocks.push(block21);
block1.innerblocks.push(block22);
$scope.showFromBlock1 = function () {
$scope.blocks = [];
$scope.blocks.push(block1);
}
$scope.showFromBlock2 = function () {
$scope.blocks = [];
$scope.blocks.push(block21);
$scope.blocks.push(block22);
}
}
表示我的树的根，它有1个内部节点（block1）和2个叶子（block21和block22）。
$scope.blocks是：
index.html而我的模板是：
<!-- all the necessary tags and includes -->
<body ng-controller="testController">
<button ng-click="showFromBlock1()" >From Block1</button>
<button ng-click="showFromBlock2()" >From Block2</button>
<div ng-repeat="block in blocks">
<div ng-include="block.html">
</div>
</div>
</body>
block1.html <div>
<div>
BLOCK 1 TYPE: {{block.id}}
<div ng-repeat="innerblock in block.innerblocks">
<div ng-include="innerblock.html">
</div>
</div>
</div>
</div>
block2.html正如您所看到的，如果您运行此示例，当按下“From Block2”（意味着html应显示从第2级的块开始的树）时，ID会正确显示，<div>
<div>
BLOCK 2 TYPE: {{block.id}}
</div>
</div>`
block中的变量与index中的变量绑定正确。如果您改为“从Block1”，您会看到block2.html内的block变量再次与block2.html中的变量绑定，而不是绑定到index.html变量在innerblock中，显示“错误”ID。我知道这是由于命名，但是如何管理这些递归情况，当有模板可以嵌套到另一个时，他们应该使用通用变量名？
（当然，这是一个可能更复杂的事情的小例子）
答案 0 :(得分：0)
而不是使用ng-include创建一个带有隔离范围的指令，该指令将使用块中的模板。这样，您就可以使用通用命名而不会发生任何冲突。
答案 1 :(得分：0)
稍微工作一下，我找到了解决办法。在ng-init内的每个ng-include中使用ng-repeat来重新绑定循环变量就足够了。根据这一点，index.html中的重复将看起来像
<div ng-repeat="block in blocks">
<div ng-include="block.html" ng-init="block = block">
</div>
</div>
而block1.html中的那个将是
<div ng-repeat="innerblock in block.innerblocks">
<div ng-include="innerblock.html" ng-init="block = innerblock">
</div>
</div>`