Question

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范围在2 div [ng-init]之间共享。例如，如果您点击“2012”年，则会更改这两个部分。有没有办法告诉angular为每个ng-init创建一个新的范围，从而点击'2012'年只会影响它所属的部分？

Answer 1

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用于初始化作用域上的值。

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

Answer 2

由于ng-if创建了一个新范围，您只需通过以下方式完成：

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

Answer 3

您好澄清并找到解决方案，请您试试下面给出的解决方案

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

AngularJS：ng-init的范围

3 个答案: