AngularJS: ng-init的范围
在Angular中ng-init的作用域是什么？这里有一个简单的例子来演示我的问题：
<div ng-init="model = { year: '2013'}">
<a href="" ng-click="model.year = '2012'">2012</a> |
<a href="" ng-click="model.year = '2013'">2013</a>
<div>Showing {{ model.year }}</div>
<hr />
</div>
<div ng-init="model = { year: '2013'}">
<a href="" ng-click="model.year = '2012'">2012</a> |
<a href="" ng-click="model.year = '2013'">2013</a>
<div>Showing {{ model.year }}</div>
</div>这里提供了一个现场示例：http://plnkr.co/edit/HkioewOzzglvFMKDPdIf?p=preview
似乎ng-init作用域在两个div[ng-init]之间是共享的。例如，如果您在任一部分中单击年份'2012‘，则这两个部分中的year属性都会更改。
有没有办法告诉angular为每个ng-init创建一个新的作用域，从而点击'2012‘年只会影响它所属的部分？
回答 3
Stack Overflow用户
发布于 2014-02-02 16:00:57
ng-init不创建新的作用域，它计算当前作用域中的表达式。在您的示例中，您的两个ng-init都在同一个作用域中，更改相同的模型属性会影响另一个模型。如果需要单独的作用域，可以尝试ng-controller。
<div ng-controller="MainCtrl" ng-init="model = { year: '2013'}">
<a href="" ng-click="model.year = '2012'">2012</a> | <a href="" ng-click="model.year = '2013'">2013</a>
<div>Showing {{ model.year }}</div>
<hr />
</div>
<div ng-controller="MainCtrl" ng-init="model = { year: '2013'}">
<a href="" ng-click="model.year = '2012'">2012</a> | <a href="" ng-click="model.year = '2013'">2013</a>
<div>Showing {{ model.year }}</div>
</div>DEMO
旁注：在这种情况下，你不需要ngInit，只需在控制器中直接初始化值即可。
ngInit的唯一合适用法是为ngRepeat的特殊属性设置别名。除了这种情况，您应该使用控制器而不是ngInit来初始化作用域上的值。
Stack Overflow用户
发布于 2018-01-12 17:04:44
由于ng-if创建了一个新的作用域，您可以通过以下方法来完成它：
<div ng-if="true" ng-init="model = { year: '2013'}">Stack Overflow用户
发布于 2017-04-05 19:10:01
您好，为了澄清和寻找解决方案，您可以尝试下面给出的解决方案
<script>
var app = angular.module('myAngularApp', []);
app.controller('myCtrl1', function ($scope) { });
app.controller('myCtrl2', function ($scope) { });
</script>
<body ng-app="myAngularApp">
<div ng-controller="myCtrl1" ng-init="model = { year: '2012'}">
<a href="" ng-click="model.year = '2012'">2012</a> | <a href="" ng-click="model.year = '2013'">2013</a>
<div>Showing {{ model.year }}</div>
</div>
<hr />
<div ng-controller="myCtrl2" ng-init="model = { year: '2013'}">
<a href="" ng-click="model.year = '2012'">2012</a> | <a href="" ng-click="model.year = '2013'">2013</a>
<div>Showing {{ model.year }}</div>
</div>
</body>
https://stackoverflow.com/questions/21508283
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号