Javascript AngularJS递归ng重复变量与ng include绑定_Javascript_Html_Angularjs_Recursion

Javascript AngularJS递归ng重复变量与ng include绑定

javascript html angularjs recursion

Javascript AngularJS递归ng重复变量与ng include绑定,javascript,html,angularjs,recursion,Javascript,Html,Angularjs,Recursion,我在用AngularJS编程动态结构时遇到了一个问题。我有一个基本的树形结构，它可以递归到无穷远。我需要根据这棵树构建一个HTML页面，其中树的每个节点都需要根据其类型由特定的HTML模板显示。通过使用ng repeat和ng include我可以很容易地做到这一点，除了与变量绑定相关的问题之外。为了更好地解释这种情况，我将使用一个简化的示例。这是我的控制器： function testController($scope,$http,$timeout,$window,$state, Data

我在用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>

block2.html

<div>
  <div>
    BLOCK 1 TYPE: {{block.id}}
    <div ng-repeat="innerblock in block.innerblocks">
        <div ng-include="innerblock.html">
        </div>
    </div>
  </div>
</div>

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


块2类型：{{BLOCK.id}
`

您可以看到，如果运行此示例，当按下“From Block2”（意味着html应该显示从第2级的块开始的树）时，ID将正确显示，因为

索引中的块
变量已正确绑定到块2.html
中的变量。如果您改按“From Block1”，您将看到block2.html
中的block
变量再次绑定到index.html
中的变量，而不是绑定到Block1.html
中的innerblock变量，从而显示“错误”id。我理解这是由于命名，但是，当存在可以嵌套到另一个模板中的模板时，我如何管理这些递归情况，因为它们应该使用通用变量名？
（当然，这是一个可能更复杂的小例子）
而不是使用ng include
创建一个具有独立作用域的指令，该指令将使用块中的模板。这样，您就可以使用通用命名，而不会产生任何冲突
 而不是使用ng include
创建一个具有独立作用域的指令，该指令将使用块中的模板。这样，您就可以使用通用命名，而不会产生任何冲突
 工作了一点，我找到了解决办法。在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>

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

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