AngularJS:ng-init 的范围

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

有没有办法告诉 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，只需直接在 Controller 中初始化该值即可。

The only appropriate use of ngInit is for aliasing special properties of ngRepeat. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

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