AngularJS: область действия ng-init

Какова область действия ng-init в Angular? Вот простой пример, который демонстрирует мой вопрос:

    <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', повлияет только на раздел, к которому он принадлежит?

Ответы

Ответ 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

Ответ 2

Здравствуйте, чтобы уточнить и найти решение, не могли бы вы попробовать решение, приведенное ниже.

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

Ответ 3

Так как ng-if создает новую область видимости, вы можете выполнить ее просто:

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