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