Angularjs 1.5 - サービスを使用したコンポーネント通信 - 非同期変数操作？

Question

私はこの角型コンポーネント通信には全く新しいものです。 Angular 1.5.Xバージョンを使用しています。コンポーネント間でデータを共有するためにファクトリを使用しています。私はサービス変数の非同期値が一定時間後に更新されるという1つの問題に直面しています。

ウォッチャーをスコープ変数以外に設定することが1つの解決策だと私は理解していますが、ここで重要なことは何か不足していると思います。皆さんは意見を分かち合うことができますか？

これは、これはこれは事はService.getTileCountが更新されることである成分2コントローラコード

function Component2Controller(Service) { 

    var self = this; 

    console.log(Service.getTileCount); 
// getting getTileCount = 0; After setting timeout function of 5 second I am able to get getTileCount value 

}; 

Answer 1

ある成分1コントローラコード

function Component1Controller(Service) { 

    this.tileData ={}; 
    var self = this; 

    var promise = Service.getTileData(this.sourceUrl); 

     promise.then(function(data) { 

     self.tileData = data; 
     Service.getTileCount = data.length; 
     console.log('This is tileData : '+ Service.getTileCount); 
     }); 

    }; 

あるService.jsコード

Service.$inject = ['$http','$q']; 

function Service($http,$q) { 

    this.$http = $http; 
    this.$q = $q; 

}; 

Service.prototype.getTileCount = 0; 

Service.prototype.getTileData = function(Url){ 

    var deferred = this.$q.defer(); 

    this.$http.get(Url) 
     .success(function(response){ 
      Service.prototype.getTileCount = response.data.length; 
      console.log('data length :', Service.prototype.getTileCount); 
     deferred.resolve(response); 
    }); 

    return deferred.promise; 
}; 

あります非同期的には、その理由は最初は0であり、次にあるpoそれが変わるint。あなたのサービスを簡素化し、常にデータの単一のソースとなるgetTileDataメソッドで作業することをお勧めします。また、実装は簡単になるでしょう：それは「プライベート」_tileData財産で応答タイルキャッシュする方法

function Service($http, $q) { 
    this._tileData = null; 
    this.$http = $http; 
    this.$q = $q; 
} 

Service.prototype.getTileData = function(Url) { 

    if (!this._tileData) { 
    this._tileData = this.$http.get(Url).then(function(response) { 
     return response.data; 
    }.bind(this)); 
    } 

    return this._tileData; 
}; 

注意、。この場合Service.getTileCountで

function Component1Controller(Service) { 

    this.tileData = {}; 
    var self = this; 

    Service.getTileData(this.sourceUrl).then(function(data) { 
    self.tileData = data; 
    console.log('This is tileData:', self.tileData.length); 
    }); 
}; 

function Component2Controller(Service) { 
    var self = this; 
    Service.getTileData(this.sourceUrl).then(function(data) { 
    console.log('tile count', data.length); 
    }); 
}; 

はもう必要ありません。今、あなたは常にデータが返されますgetTileData方法あなたはそれを呼び出すに関係なくに頼ることができます。

デモ：あなたの入力のためのhttp://plnkr.co/edit/3zE6VL4emXaLRx2nCRih?p=info