同一页上有不同的ng-include：如何将不同的变量发送给每个变量？

小编典典

同一页上有不同的ng-include：如何将不同的变量发送给每个变量？

angularjs

我的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也需要相同的名称。那么，如何将不同的变量发送到每个不同的include？

阅读 225

2020-07-04

共1个答案

小编典典

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

2020-07-04