Angularjs 1.5 - Компонентная связь с использованием сервиса - манипуляция переменной Async?

Question

Я очень новичок в этой связи. Я использую версию Angular 1.5.X, и я использую фабрику для обмена данными между компонентами. Я столкнулся с одной проблемой, когда значение Async Service Variable обновляется через определенное время.

Я понимаю, что одним из решений является установка наблюдателя на переменную, не относящуюся к сфере видимости, но я думаю, что мне не хватает чего-то важного здесь. Можете ли вы, ребята, поделиться мнениями?

Это код 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; 
}; 

Это код компонента 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); 
     }); 

    }; 

Это код компонента 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

Дело в том, что Service.getTileCount обновляется асинхронно, поэтому сначала это 0, а затем в некоторой по int it изменяется. Я бы рекомендовал вам упростить вашу службу и всегда работать с методом getTileData, который будет единственным источником данных. Реализация также станет проще:

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

Обратите внимание, как он кэширует плитки ответ в «частной» _tileData собственности. Теперь вы всегда можете рассчитывать на getTileData метод, который будет возвращать независимо от того, данные, когда вы называете его:

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); 
    }); 
}; 

В этом случае Service.getTileCount не нужен больше.

Демо:http://plnkr.co/edit/3zE6VL4emXaLRx2nCRih?p=info