2016-03-18 7 views
1

質問:私は2つのコントローラDogとCatを持っています。犬の名前を変更すると、$ digest cycleが実行され、Catはメソッド{{ctrl.getTime()}}の使用のためにこのビューを更新します。これは、すべてのコントローラをロードし、ng-ifまたはstateを使用しない大規模なアプリケーションにとって大きな問題です。現在のアプリケーションでは、テンプレート内でメソッドを使用する場所が多く、すべてのアプリケーションコントローラをロードして初期化し、状態やng-ifを使用しない場合は、ng-showのみを使用します。私はよりよい解決策がプロパティを使用することを知っていますが、すべてのアプリスコープではなく、DogCtrlスコープだけを$ digestすることが可能でしょうか?AngularJsはダイジェストのみ現在のスコープを許可します

HTML

<div ng-app="myApp"> 
    <div ng-controller="DogCtrl as ctrl"> 
     <h3>DogCtrl</h3> 
     Dog name: <input ng-model="ctrl.name" />{{ctrl.name}} 
    </div> 
    <hr /> 
    <div ng-controller="CatCtrl as ctrl"> 
     <h3>CatCtrl</h3> 
     Cat getTime: {{ctrl.getTime()}} {{ctrl.random}} 
    </div> 
</div> 

Javascriptを

var myApp = angular.module('myApp',[]); 
myApp.controller('DogCtrl', DogCtrl); 
myApp.controller('CatCtrl', CatCtrl); 

function DogCtrl() { 
     this.name = 'Doggy'; 
} 

function CatCtrl() { 
     this.getTime = function() { 
      return new Date().getTime(); 
    } 
} 

フィドル:

<div ng-controller="CatCtrl as ctrl"> 
    <h3>CatCtrl</h3> 
    Cat getTime: {{ctrl.currentTime}} {{ctrl.random}} 
</div> 

をとTするためにあなたのコントローラーを変更します。http://jsfiddle.net/nvgofo46/1/

+0

基本的に私は範囲が不足していると感じていますhttp://jsfiddle.net/GomesNayagam/fnqcv86j/2/ – Gomes

+0

なぜあなたは 'ctrl.getTime()'をhtmlで直接使用したのでしょうか?毎回更新したいですか? –

+0

@PankajParkar何度かisActive()のようなメソッドを持っていて、場所をはるかに超えてプロパティを扱う代わりに、このメソッドに計算ロジックを配置する方が快適ですが、このケースでは、どの角度評価がCatCtrlビュー全く変わった。 –

答えて

1

はこれにあなたのhtmlを変更彼の:

function CatCtrl() { 
    this.getTime = function() { 
     return new Date().getTime(); 
    } 
    this.currentTime = this.getTime(); 
} 

あなたのビューには機能を持たないようにしてください。関数はすべてのダイジェストで実行されるためです。 モデルにバインドしてそれに応じてモデルを更新する方が効率的です。

私は関数を削除してthis.currentTime = new Date()。getTime()を設定することができますが、これはこの練習のポイントではありません。

+0

はい、あなたは正しいです、私は角がすべてのダイジェストサイクルごとにビュー内のすべての関数を評価することを示すためだけにメソッド呼び出しを追加しました。おそらく、変更されたスコープのみを評価するために角度1を指定することはできません。私は角度2の変化の検出について1つの良い記事を読んで、この問題のような縫い目はもう消滅しませんhttp://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html –

関連する問題