web-dev-qa-db-ja.com

AngularJS：ng-initのスコープ

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」年をクリックすると、両方のセクションが変更されます。 angular ng-initごとに新しいスコープを作成し、それによって '2012'年をクリックすると、それが属するセクションにのみ影響するように指示する方法はありますか？

angularjsangularjs-scopeangularjs-ng-init
15
Johnny Oshika

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

20
Khanh TO

ng-ifは新しいスコープを作成します。次の方法で実行できます。

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

こんにちは、解決策を明確にして見つけるために、以下に示す解決策を試してください

<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