AngularJS：ng-init 的范围答案

【问题标题】：AngularJS: scope of ng-initAngularJS：ng-init 的范围
【发布时间】：2014-02-25 19:30:51
【问题描述】：

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”年，则会更改两个部分中的year 属性。

有没有办法告诉 Angular 为每个 ng-init 创建一个新范围，从而单击“2012”年只会影响它所属的部分？

【问题讨论】：

标签： angularjs angularjs-scope angularjs-ng-init

【解决方案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

【讨论】：

但是，如果你使用ng-controller，ng-init 就变得没用了。或者至少令人困惑。最好把初始化代码放在控制器里面。
@7hi4g0：我同意。但我认为这与这个问题没有太大关系。这个问题是关于 ng-init 的范围。
我仍然认为最好在答案上加上某种警告，因为 angularjs 的文档本身指出 ng-if 仅与 ng-repeat 一起有意义
@7hi4g0：当您在页面中使用 ng-repeat 并且您正在迭代的列表是 ajax 请求的结果时，您必须使用 ng-init。
@7hi4g0 你当然不知道。进行 ajax 调用，更新您的模型，您的 ng-repeat 将正确运行。

【解决方案2】：

由于ng-if 创建了一个新作用域，您可以通过以下方式完成它：

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

【讨论】：

或者简单地说

【解决方案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>

【讨论】：

在这里您可以成功实现您需要实施的想法