angularjs – 不同的ng-include在同一页上：如何向每个发送不同

发布时间：2020-12-17 08:56:02 所属栏目：安全来源：网络整理

导读：我有一个页面在我的AngularJS应用程序，其中我想包括相同的html partial，但与不同的变量。如果我这样做在我的主要html： div id="div1" ng-include src="partials/toBeIncluded.html onload="var='A'"div id="div2" ng-include src="partials/toBeIncluded.

我有一个页面在我的AngularJS应用程序，其中我想包括相同的html partial，但与不同的变量。如果我这样做在我的主要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的表达式在每次加载新的部分时进行评估。在这种情况下，您要更改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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!