AngularJS用ng-include遞歸ng-repeat變量綁定

我在用AngularJS編寫動態結構時遇到問題。我基本上有一個樹結構，它可能會遞歸地向下遞減到無窮大。我需要根據這棵樹建立一個HTML頁面，樹的每個節點都需要根據它的類型用特定的HTML模板來顯示。通過使用ng-repeat和ng-include我可以很容易地做到這一點，除了出現與變量綁定相關的問題。爲了更好地解釋這種情況，我將使用一個簡化的例子。這是我的控制器：AngularJS用ng-include遞歸ng-repeat變量綁定

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個內節點（塊1）和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>`

正如你可以看到，如果你運行這個例子，當「從塊2 「被按下（意思是說t html應顯示從2級塊開始的樹），因爲index中的block變量與block2.html中的變量正確綁定，所以ID正確顯示。如果您按「取自Block1」，則會看到block2.html中的block變量再次與index.html中的變量綁定，而不是綁定到block1.html中的innerblock變量，從而顯示「錯誤」的id。我知道這是由於命名，但是如何管理這些遞歸情況，當有模板可以嵌套到另一個模板中時，他們應該使用一個通用變量名？（當然，這是事情的一個小例子，可能要複雜得多）

來源

2017-06-21 McKracken

您應該創建一個指令或組件。這樣你可以用自己的模板來區分變量的範圍。 – Hoyen

工作一點點我找到了我的解決方案。在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>`

來源

2017-07-01 17:11:06 McKracken

而不是使用ng-include創建，將使用模板從你的塊隔離範圍指令。這樣你就可以使用通用命名而不會產生任何衝突。

來源

2017-06-21 18:13:50 xReeQz

AngularJS用ng-include遞歸ng-repeat變量綁定

回答

相關問題