AngularJS アプリに同じ html パーシャルを含めたいページがありますが、変数は異なります。メインでこれを行う場合html：
<div id="div1" ng-include src="partials/toBeIncluded.html onload="var='A'">
<div id="div2" ng-include src="partials/toBeIncluded.html onload="var='B'">
そして、toBeIncluded.html次のように見えます
<div>{{var}}</div>
どちらもdiv次のようになります
<div id="div1"><div>B</div></div>
<div id="div2"><div>B</div></div>
onloadこれは、すべての ng-includes に対して同じことが呼び出されるという事実に関係していると思います。では、異なる変数をそれぞれのインクルードに送信するにはどうすればよいでしょうか?
に渡される式はonload、新しいパーシャルが読み込まれるたびに評価されます。この場合、値をvar2 回変更しているため、両方のパーシャルがロードされるまでに現在の値はB
各パーシャル/テンプレートに異なるデータを渡したい (基になる html ファイルは同じ)。これを実現するには、Tiago が言及しているように、さまざまなコントローラーを使用できます。たとえば、次のことを考慮してください。
<body ng-controller='MainCtrl'>
<div ng-include src='"toBeIncluded.html"' ng-controller='ctrlA' onload="hi()"></div>
<div ng-include src='"toBeIncluded.html"' ng-controller='ctrlB' onload="hi()"></div>
</body>
ここでは、2 つのパーシャルがあり、それぞれが独自のコントローラー (ctrlAおよびctrlB) から管理される独自のスコープを持ち、両方の子スコープがMainCtrlです。関数hi()は のスコープに属し、2 回MainCtrl実行されます。
次のコントローラーがある場合
app.controller('MainCtrl', function($scope) {
$scope.msg = "Hello from main controller";
$scope.hi= function(){console.log('hi');};
});
app.controller('ctrlA', function($scope) {
$scope.v = "Hello from controller A";
});
app.controller('ctrlB', function($scope) {
$scope.v = "Hello from controller B";
});
そして内容はtoBeIncluded.html、
<p>value of msg = {{msg}}</p>
<p>value of v = {{v}} </p>
結果のhtmlは、次の行に沿ったものになります
<p>value of msg = Hello from main controller</p>
<p>value of v = Hello from main controller A </p>
と
<p>value of msg = Hello from main controller</p>
<p>value of v = Hello from controller B </p>
マークが言ったことと同じですが、少し単純化して「オンザフライ」にするために、次を使用します。
<div ng-repeat="name in ['John']" ng-include="'name-template.html'"></div>
<div ng-repeat="name in ['Jack']" ng-include="'name-template.html'"></div>
<script type="text/ng-template" id="name-template.html">
<div>The name is {{ name }}</div>
<script>
@jm-の回答に対するコメントで、ng-repeat 内にパーシャルをロードしたいと述べています。これを行うには、$scope に配列を作成し、その配列に一意の値を設定します。
$scope.partialStuff = [ 'p1', 'p2', 'p3' ];
あなたのパーシャルのどこかに：
{{partialVar}}
HTML:
<div ng-repeat="partialVar in partialStuff">
<div ng-include src="'partials/toBeIncluded.html'"></div>
</div>
フィドル。
私は間違っているかもしれませんが、ディレクティブを使用する方が良いのではないでしょうか?
.directive('foobar', [function factory() {
return {
restrict: 'E',
replace: true,
templateUrl: '/toBeIncluded.html',
scope: {
"var": "="
}
};
}]);
そしてあなたのHTML
<div ng-repeat="var in data">
<foobar var="var"></foobar>
</div>
これで、foobar 要素をテンプレートに置き換える必要があります。それぞれに独自のスコープがあります。
具体的には、ng-init および onload 式は、nginclude によって作成された子スコープではなく、親スコープで評価されます。したがって、親スコープに値を 2 回割り当てていますvar。どちらも、これらの ng-includes 内のコンテンツがコンパイルおよび評価される前に行われます。各子スコープが作成されると、var='B' である親スコープから継承されます。
パーシャル内に変数 foo があるとします。
次に、次のように foo を渡します。
<ng-include src="'partials/foo-part.html'" onLoad="foo='bar'"></ng-include>
ブラウザーの互換性を高めるために、次のように渡すことができます。
<div ng-include src="'partials/foo-part.html'" onLoad="foo='bar'"></div>
onInclude="foo='bar'"代わりに使用することもできますonLoad
onload の使用は、グローバル スコープを散らかすため、クリーンなソリューションではありません。もっと複雑なものがあると、失敗し始めます。
ng-include の代わりに新しいディレクティブを使用すると、よりクリーンなソリューションになります。
理想的な使用法は次のようになります。
<div ng-include-template="partials/toBeIncluded.html" ng-include-variables="{ var: 'A' }"></div>
<div ng-include-template="partials/toBeIncluded.html" ng-include-variables="{ var: 'B' }"></div>
ディレクティブは次のとおりです。
.directive(
'ngIncludeTemplate'
() ->
{
templateUrl: (elem, attrs) -> attrs.ngIncludeTemplate
restrict: 'A'
scope: {
'ngIncludeVariables': '&'
}
link: (scope, elem, attrs) ->
vars = scope.ngIncludeVariables()
for key, value of vars
scope[key] = value
}
)
ディレクティブがグローバル スコープを使用していないことがわかります。代わりに、ng-include-variables からオブジェクトを読み取り、それらのメンバーを独自のローカル スコープに追加します。
ng-include は、グローバル スコープにアクセスできるため、それほど再利用可能ではありません。少し変です。
これがあなたの望むものであることを願っています。それはきれいで一般的です。
普遍的な再利用可能なディレクティブを作成する方法があります。
これは私の同僚が思いついたものです（Knockout.jsに触発されました）。
指令：
(function () {
'use strict';
angular
.module('directives')
.directive('ngWith', ngWith);
function ngWith() {
return {
restrict: 'A',
replace: true,
scope: {
model: '=',
template: '@'
},
template: '<div data-ng-include="template"></div>',
};
}
})();
使用法：
<div data-ng-with="" data-model="parentObj.childObj.whatEver" data-template='my-template.html'></div>
すべての ng-includes に対して同じ「onLoad」が呼び出されるわけではありません。ほとんどの場合、var は A に設定され、次に B に設定されます。問題は、同じスコープにあるため、両方のインクルードで共有されていることです。angularJS のモデルとしての「var」は、スコープに依存します。
パーシャルに個別の値を持たせるには、それぞれに独自のスコープが必要です。これを行う最も簡単な方法は、コントローラーまたはディレクティブをセットアップし、それを ng-include がある Dom 要素に割り当て、そのスコープ内で値を設定することです。
ng-repeat 内にパーシャルを含めると、親スコープの $index に引き続きアクセスできます。パーシャルに {{$index}} を含めるだけです。
私は代替手段を探していました.jsオブジェクトがいくつかのパラメーターを含まれているパーシャルに送信することを望みました。これは@denis-pshenov によって作成されたものの進化版です。コントローラーを使用してデータを入力するか、ng-init を使用できます。
基本的に、このようなもの、
var myApp = angular.module('myApp',[]);
myApp.controller('Controller', function($scope) {
$scope.ourData = [ { name : 'John', address : 'Paradise' } ];
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="Controller">
<div ng-repeat="data in ourData" ng-include="'partial.html'"></div>
<div ng-init="ourData2 = [ { name : 'Jack', address : 'Paradise' } ]" />
<div ng-repeat="data in ourData2" ng-include="'partial.html'"></div>
</div>
<script type="text/ng-template" id="partial.html">
<div>The name is {{ data.name }} and the address is {{ data.address }} </div>
</script>