Question

使用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

而我的模板是：  <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。我知道这是由于命名，但是如何管理这些递归情况，当有模板可以嵌套到另一个时，他们应该使用通用变量名？（当然，这是一个可能更复杂的事情的小例子）

Answer 1

而不是使用ng-include创建一个带有隔离范围的指令，该指令将使用块中的模板。这样，您就可以使用通用命名而不会发生任何冲突。

Answer 2

稍微工作一下，我找到了解决办法。在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>`

AngularJS使用ng-include递归ng-repeat变量绑定

2 个答案: