包括在同一页上:如何向每个发送不同的变量?

我在我的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>

我想这与ng-includes中的onload被调用的事实有关。 那么如何向每个不同的包含发送不同的变量?


传递给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>

在这里,我们有两个partials,每个都有自己的作用域,从它们自己的控制器( ctrlActrlB )管理,都是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


就像Mark所说的,但为了简化它并使之更“实时”,就是使用以下内容:

<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/


在你对@ 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>

小提琴。

链接地址: http://www.djcxy.com/p/47911.html

上一篇: include's on the same page: how to send different variables to each?

下一篇: Dynamically load template inside ng