AngularJS递归ng-repeat变量绑定与ng-include答案

【问题标题】：AngularJS recursive ng-repeat variable binding with ng-includeAngularJS递归ng-repeat变量绑定与ng-include
【发布时间】：2017-11-24 18:45:31
【问题描述】：

我在使用 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 会正确显示，如 block 变量index 正确绑定到 block2.html 中的那个。如果您按“From Block1”，您将看到block2.html 中的block 变量再次绑定index.html 中的变量，而不是绑定到block1.html 中的innerblock 变量，因此显示“错误”的身份。我知道这是由于命名，但是当有模板可以嵌套到另一个模板时，我该如何管理这些递归情况，它们应该使用通用变量名？（当然，这是一个可能更复杂的小例子）

【问题讨论】：

您应该创建一个指令或一个组件。这样，您可以使用自己的模板隔离变量的范围。

标签： javascript html angularjs recursion

【解决方案1】：

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

【讨论】：

【解决方案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 中的那个是

<div ng-repeat="innerblock in block.innerblocks">
    <div ng-include="innerblock.html" ng-init="block = innerblock">
    </div>
</div>`

【讨论】：