我在我的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调用相同的事实有关.那么如何向每个不同的包含发送不同的变量呢？
jai*_*ime 40
onload每次加载新部分时传递的表达式都会计算.在这种情况下,您将更改var两次的值,因此在加载两个部分时,当前值将是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>
在这里,我们有两个部分,每个部分都有自己的范围从他们自己的控制器(ctrlA和ctrlB)管理,两个子范围MainCtrl.该函数hi()属于范围,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>
示例如下:http://plnkr.co/edit/xeloFM？p = preview
Den*_*nov 27
就像马克所说的那样,但为了简化它并使其更"动态"使用以下内容:
<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>
示例:http://jsfiddle.net/Cndc6/4/
Mar*_*cok 20
在你对@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>
小提琴.
Dav*_*Kok 10
我可能错了,但使用指令不是更好吗？
.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元素.每个都有自己的范围.
| 归档时间： |
|
| 查看次数： |
52175 次 |
| 最近记录： |