サービスからの価値観と角度の変化を検出するメカニズム

Question

私はいくつかの指令を持っています。これらの指令は、同じデータモデルをそのビューに表示します。データはajax呼び出しの後に生成されます。現在、私はajax呼び出しをサービスに入れています。そして、ajax呼び出しが返されると、サービスの変数が更新されます。このような何か：これはAjaxのリターン（私はので、サービスの属性として返されたデータを置く意味に基づいてビューを更新するための良い方法があれば

//service 
serviceModule.service("myService",function(){ 
    this.data = []; 
    this.ajaxCall = function(){ 
      ... 
     //in ajax success call back 
      this.data = response.data; 
    }; 
}); 

//directive A 
moduleA.directive("directiveA",function(myService){ 
    return{ 
     templateUrl:'someUrl.html' 
     link: function(scope){ 
      scope.data = myService.data; 
     } 
    } 

}) 

// someUrl.html 
<div ng-repeat="line in data"> 
{{line.abc}} 
</div> 

私の最初の質問は、私はわからないということですデザインの観点からは、いくつかの属性ではなく、どこかに割り当てられる返された値です...）

サービス属性の変更を自動的に検出するいくつかの方法を試しました。

1）私の元のアプローチ（上記の擬似のような）はうまくいかず、私はなぜだろうか。私は "scope.data = myService.data "、myService.dataおよびscope.dataは実際には同じメモリアドレスを指し、そのメモリアドレスの内容が変更されると、" scope.data "も変更され、ディレクティブによって検出されるはずです。誰かがメモリの観点から私にメカニズムを紹介できるのであれば、非常に役に立ちます。その後、私はディレクティブを少し変え AngularJS : How to watch service variables? ：

//directive A 
moduleA.directive("directiveA",function(myService){ 
    return{ 
     templateUrl:'someUrl.html' 
     link: function(scope){ 
      scope.service = myService; 
     } 
    } 

}) 

とhtmlで、私はちょうどservice.dataを使用する代わりに

2）次に私はいくつかのGoogle検索を行なったし、この便利なポストを見つけましたデータ。 。それは私が$ rootScopeを追加するまで動作しません$（適用）サービスで：

serviceModule.service("myService",function(){ 
     this.data = []; 
     this.ajaxCall = function(){ 
      //in ajax success call back 
       this.data = response.data; 
       **$rootScope.$apply();** 
     }; 
    }); 

だから、誰もが$時計が角にのために働く、この$適用方法を説明してもらえますか？

ありがとうございます！

Answer 1

Angularの悪名高い$ digestサイクルは、魔法の背後にあるトリックです。何が起こるのは、各$ダイジェストサイクルで、$ scope（$ rootScopeから最後の隔離スコープまで）のアプリケーションに設定されたすべての$ watcher（バインドされた変数のようなもの）に角度があり、変更があるかどうかを確認することです。存在する場合は、ビューを更新します。下に変更があり、双方向バインディングがある場合、何も変更されなくなるまで、それは再び始まります。 これで、角のあるアプリを構築するときの主な目標を理解できるようになりました。つまり、ダイジェストを少なくして時計を少なくしました。より少ない$ digestsので、私たちは何度もすべての時計を実行する必要はなく、スレッドを「チョークアップ」します。より少ない$ watches - それぞれの$ digestは可能な限りものになります。 ... $ scope。$ applyを使うと$ digestサイクルが始まるので間違いなく動作します。問題は、上から$ダイジェストサイクルを開始します。それはあなたの必要に応じて決まります。 あなたの必要性を理解する必要があります。たとえば、あなたのディレクティブが同じ親ディレクティブの下にある場合、$ scope。$ digest（）を使用すれば十分でしょう。残りのアプリ。 ディレクティブが広がっている場合は、バインディングを使用する代わりにajax呼び出しの約束を使用してディレクティブを更新し、ディレクティブ自体でローカルの$ scope。$ digest（）を実行することができます。 だからあなたのサービスは、次のようになります。代わりに、結合の、あなたがこれを行うことができ、

serviceModule.service("myService",function($q){ 
var deferred = $q.defer(); 
     this.data = []; 
     this.ajaxCall = function(){ 
      //in ajax success call back 
       this.data = response.data; 
deferred.notify(this.data); 
     }; 
this.promise = deferred.promise; 
    }); 

そして、あなたのディレクティブで：

moduleA.directive("directiveA",function(myService){ 
    return{ 
     templateUrl:'someUrl.html', 
     link: function(scope){ 
      var promise = myService.promise; 
promise.then(null, null, function(data){ 
scope.myData = data; 
}); 
     } 
    } 

}) 

$qサービスは「賢く」時はいつでもあなたのresolve、rejectダイジェストを開始またはnotify。 ここでは素晴らしい投稿を読むことができます：http://www.bennadel.com/blog/2778-exploring-q-and-scope-digest-integration-in-angularjs.htm

これは、$ダイジェストと2つの可能な解決策について私が解説する最短方法でした。使用できる方法がさらにあります。これはあなたが本当に求めていることはSOの質問と回答の範囲を超えてビットであるダイジェストサイクルの説明のためである