16

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”年只会影响它所属的部分？

4

3 回答 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

于 2014-02-02T08:00:56.967 回答
3

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

<div ng-if="true" ng-init="model = { year: '2013'}">
于 2018-01-12T09:04:43.647 回答
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>

于 2017-04-05T11:10:01.490 回答