gpt4 book ai didi

angularjs - 同一页面上有不同的 ng-include : how to send different variables to each?

转载 作者:行者123 更新时间:2023-12-03 07:07:45 26 4
gpt4 key购买 nike

我的 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'">

toBeInincluded.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 文件相同)。为了实现这一点,正如蒂亚戈提到的,您可以使用不同的 Controller 来实现。例如,考虑以下内容

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

在这里,我们有两个部分,每个部分都有自己的范围,由自己的 Controller 管理( ctrlActrlB ),都是 MainCtrl 的子范围。 。函数hi()属于MainCtrl的范围并将运行两次

如果我们有以下 Controller

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

关于angularjs - 同一页面上有不同的 ng-include : how to send different variables to each?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13811948/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com