AngularJS：ng-init 的范围

问题描述 投票：0回答：3
angularjs angularjs-scope angularjs-ng-init
3个回答
20
投票

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>

演示

旁注： 在这种情况下，您不需要 ngInit，只需直接在控制器中初始化该值即可。

ngInit 唯一合适的用途是为特殊属性设置别名 ngRepeat.除了这种情况，您应该使用控制器而不是 ngInit 初始化范围内的值。

https://docs.angularjs.org/api/ng/directive/ngInit

3
投票

由于 

ng-if
创建了一个新范围，您可以通过以下方式完成它：

<div ng-if="true" ng-init="model = { year: '2013'}">
0
投票

您好，为了澄清并找到解决方案，您可以尝试下面给出的解决方案吗

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.