web-dev-qa-db-fra.com

AngularJS: portée de ng-init

Quelle est la portée de ng-init dans Angular? Voici un exemple simple qui illustre ma question:

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

Exemple en direct disponible ici: http://plnkr.co/edit/HkioewOzzglvFMKDPdIf?p=preview

Il semble que la portée de ng-init soit partagée entre les 2 div [ng-init]. Par exemple, si vous cliquez sur l'année '2012', cela change les deux sections. Existe-t-il un moyen de dire angular pour créer une nouvelle portée pour chaque ng-init et donc cliquer sur l'année '2012' n'aura d'impact que sur la section à laquelle il appartient?

angularjsangularjs-scopeangularjs-ng-init
15
Johnny Oshika

ng-init ne crée pas de nouvelle étendue, il évalue une expression dans l'étendue actuelle. Dans votre exemple, votre ng-init sont dans la même portée , changer la même propriété de modèle affectera l'autre. Si vous avez besoin d'une portée distincte, vous pouvez essayer 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>

DÉMO

Notes annexes: Dans ce cas, vous n'avez pas besoin de ngInit, il suffit d'initialiser la valeur directement dans votre contrôleur.

La seule utilisation appropriée de ngInit est d'aliaser les propriétés spéciales de ngRepeat. Outre ce cas, vous devez utiliser des contrôleurs plutôt que ngInit pour initialiser des valeurs sur une étendue.

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

20
Khanh TO

Puisque ng-if crée une nouvelle portée, vous pouvez l'accomplir simplement en:

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

Bonjour pour clarifier et trouver la solution, pourriez-vous essayer la solution ci-dessous

<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>
0
Midhun m k