include's on the same page: how to send different variables to each?
I've got a page in my AngularJS app in which I would like to include the same html partial, but with different variables. If I do this in my main 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'">
And toBeIncluded.html looks like
<div>{{var}}</div>
Both div 's will look like
<div id="div1"><div>B</div></div>
<div id="div2"><div>B</div></div>
I guess it has to do with the fact that the the same onload gets called for al the ng-includes. So how do I send different variables to each different include?
The expression passed to onload evaluates every time a new partial is loaded. In this case you are changing the values of var twice so by the time both partials are loaded the current value will be B
You want to pass different data to each partial/template (with the underlying html file being the same). To achieve this, as Tiago mentions, you could do it with different controllers. For example, consider the following
<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>
Here, we have two partials, each with its own scope managed from their own controller ( ctrlA and ctrlB ), both children scopes of MainCtrl . The function hi() belongs to the scope of MainCtrl and will be run twice .
If we have the following controllers
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";
});
And the contents of toBeIncluded.html are
<p>value of msg = {{msg}}</p>
<p>value of v = {{v}} </p>
The resulting html would be something along the following lines
<p>value of msg = Hello from main controller</p>
<p>value of v = Hello from main controller A </p>
and
<p>value of msg = Hello from main controller</p>
<p>value of v = Hello from controller B </p>
Example here: http://plnkr.co/edit/xeloFM?p=preview
Just like what Mark said, but to simplify it a little bit and make it more "on-the fly" is to use the following:
<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>
Example here: http://jsfiddle.net/Cndc6/4/
In your comment on @jm-'s answer, you mention you want to load your partial inside ng-repeat. To do this, create an array on your $scope, and set the unique values on that array:
$scope.partialStuff = [ 'p1', 'p2', 'p3' ];
Somewhere in your partial:
{{partialVar}}
The HTML:
<div ng-repeat="partialVar in partialStuff">
<div ng-include src="'partials/toBeIncluded.html'"></div>
</div>
Fiddle.
链接地址: http://www.djcxy.com/p/47912.html上一篇: 复杂的部分和模板嵌套