1
AngularJSを使用して動的構造をプログラミングする際に問題があります。私は基本的にツリー構造を持っています。木構造は、潜在的に無限になる可能性があります。このツリーに従ってHTMLページを構築する必要があります。ツリーの各ノードは、そのタイプに応じて特定のHTMLテンプレートで表示する必要があります。 ng-repeatとng-includeを使用することで、変数バインディングに関連する問題が発生することを除けば、これを非常に簡単に行うことができます。 状況をよりよく説明するために、私は簡単な例を使用します。 これは私のコントローラである：AngularJS ng-includeとの再帰的なng-repeat変数のバインド
$scope.blocks 1つの内部ノード（BLOCK1）及び2葉（block21とblock22）を有している私のツリーのルートを表す
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);
}
}
。
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から"が押されている（thaブロックレベル2のブロックから開始してツリーを表示する必要があります）、indexのblock変数がblock2.htmlの変数に正しくバインドされているため、IDが正しく表示されます。 「From Block1」の代わりにblock変数がblock2.html内にある場合は、innerblock変数がblock1.htmlにバインドされているのではなく、index.htmlの変数に再度バインドされ、「間違った」IDが表示されます。これは命名によるものだと理解していますが、これらの再帰的な状況を管理するにはどうすればよいでしょうか。一般的な変数名を使用する必要があります。 （もちろんこれはもっと複雑な小さな例です）
になりながら、これによると、
index.htmlでの繰り返しはのようになります。そうすれば、独自のテンプレートを使って変数のスコープを分離することができます。 – Hoyen