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

Question

使用AngularJS编写动态结构时遇到问题。 我基本上有一个树形结构，它可以递归地递减到无穷大。 我需要根据这个树构建一个HTML页面，其中树的每个节点都需要根据其类型由特定的HTML模板显示。 通过使用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);
  }
}

其中$scope.blocks表示我的树的根，它有1个内部节点（block1）和2个叶子（block21和block22）。

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

<div>
   <div>
      BLOCK 2 TYPE: {{block.id}}
   </div>
</div>`

如您所见，如果您运行此示例，当按下“From Block2”（意味着html应显示从第2级上的块开始的树）时，正确显示ID，因为index的block变量已正确绑定到block2.html中的block2.html 。如果按改为“从块1”，你会看到block内变量block2.html再次绑定的一个中index.html ，而不是被绑定到innerblock变量block1.html ，从而显示“错误”的ID 。 我知道这是由于命名，但是如何管理这些递归情况，当有模板可以嵌套到另一个时，他们应该使用通用变量名？ （当然，这是一个可能更复杂的事情的小例子）

Answer 1

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

Answer 2

工作了一点我发现了我的解决方案。 在ng-repeat中的每个ng-include使用ng-init就足以重新绑定循环变量。 据此， index.html的重复将如下所示

<div ng-repeat="block in blocks">
    <div ng-include="block.html" ng-init="block = block">
    </div>
</div>

而block1.html中的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 个解决方案

解决方案1
0 2017-06-21 18:13:50

解决方案2
0 已采纳 2017-07-01 17:11:06

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

问题描述

2 个解决方案

解决方案1 0 2017-06-21 18:13:50

解决方案2 0 已采纳 2017-07-01 17:11:06

解决方案1
0 2017-06-21 18:13:50

解决方案2
0 已采纳 2017-07-01 17:11:06