0
AngularJSについての多くの質問と投稿、および指令の使用方法を知っています。解決方法がわからない別の問題が生じるまで、私はうまく働いています。角度指令テンプレートの不明なスコープ
カスタムHTML要素でディレクティブを使用します。ディレクティブは、この要素をテンプレートで定義されている通常のhtmlツリーに変換します。 HTML要素には、テンプレートを構築する際に使用されるいくつかの属性があります。いずれかの要素のデータがHTTP要求で受信され、正常に読み込まれます。これは私がうまく動作している部分です。
もう何かしたいです。 I've created a plunker which is an example of what I want to achieve.それは偽のものですが、私の問題をよく示しています。
のindex.html：
<body ng-controller="MainCtrl">
<div id="phones">
<phone brand="SmartBrand" model="xx" comment="blah"></phone>
<phone brand="SmarterBrand" model="abc" comment="other {{dynamic.c1}}"></phone>
</div>
</body>
角度指令：
app.directive('phone', function() {
return {
restrict: 'E',
replace: true,
scope: {
'comment': '@',
'brand': '@'
},
templateUrl: 'customTpl.html',
controller: function($scope) {
fakeResponse = {
"data": {
"success": true,
"data": "X300",
"dynamic": {
"c1": "12",
"c2": "1"
}
}
}
$scope.model = fakeResponse.data.data;
$scope.dynamic = fakeResponse.data.dynamic;
}
}
});
テンプレート：
<div class="phone">
<header>
<h2>{{brand}} <strong>{{model}}</strong></h2>
</header>
<p>Comment: <strong>{{comment}}</strong></p>
</div>
だから私は要素のタグのいずれかをカスタマイズできるようにしたいと思います（この例では電話のコメント）。そのトリックは、タグに追加される情報の数が異なることがあるということです。私が確信できる唯一のことは、名前がAJAXリクエストから受け取ったものと一致することです。私はコメント全体をAJAXで受け取れるようにすることができ、それが私の問題を解決します。しかし、私は、それが構築されている変数からテンプレートを分離したいと思います。出来ますか？
あなたが別の指令として、あるいはngRepeatステートメントとして動的部分を分離し、その後ループ、そしてあなたはそれが表示されます持っている動的データの数と同じくらいすることができますあなたの返信に感謝しています。 – xelilof
@xelilofある電話機のコメントが次のようになったらどうなるでしょうか？ 'comment =" {dynamic.c2}}の生涯で再生時間を{{dynamic.c1}}時間にしたいのですが、他の電話機では 'comment = "{{dynamic.c1}}の猿が{{dynamic.c2}}時間に{{dynamic.c3}}時間に電話を破壊できるかどうかは不明です。私はng-repeatがやっていないと思う... – george007