Блог

Я довольно новичок в angularjs и хотел бы задать несколько вопросов. Я работаю над проектом, в котором мне нужно получить объект формы с сервера. Форма представляет собой сложный древовидный объект со многими слоями, и я создал 4 разных компонента / вкладки для привязки к соответствующим объектам. Я создал сервис для получения данных.

 angular.module('myService', ['restangular'])
        .factory('FormService', ['Restangular', '$q', function(Restangular, $q) { 

    function FormService() {
        var self = this;
        self.form = null;

        self.getForm = function getForm(id)
        {
            var deferred = $q.defer();
            if (self.form !== null)
            {
                deferred.resolve(self.form);
                console.log("Cache!");
            }
            else {
                Restangular.one('form', id).get()
                  .then(function successCallback(response)
                  {
                    self.form = response;
                    deferred.resolve(response);
                    console.log("from server!");

                  }, function errorCallback(response) {
                    deferred.reject(response);
                    console.log("error, cannot resolve object");
                  });
            }
            return deferred.promise;
        }

      return new FormService();
  }])
});
  

Затем у меня были все мои компоненты с аналогичной конфигурацией ниже:

 angular.module('page1Summary', ['formService']).component('page1Summary', {
  templateUrl: 'page1-summary/page1-summary.template.html',
  controller: ['FormService', function Page1SummaryController(FormService) {
    var ctrl = this;

    // ******* Init Params Start *********** //
    this.$onInit = function() {
      // init value when object ready
      FormService.getForm()
        .then(
          /* on success */
          function successCallback(data) {
            console.log("page1-summary init");
            ctrl.form = data;
            console.log("page1-summary got the data");
        },
          /* on error */
          function errorCallback(data)
          {
              console.log("failed to get form");
          }
      );
    }

    /* other stuff here */
 }
  

Я печатал либо «кэш!», либо «с сервера» в службе getForm. Чтобы я мог выяснить, извлекаю ли я данные с сервера или из памяти. Однако каждый раз, когда я обновляю, результат отличается. Иногда данные сохраняются в локальной переменной в сервисе и «кэшируются», но иногда некоторые из моих страниц получают данные «с сервера».

Я хотел бы знать, что происходит не так? Я думал, что только в первый раз служба получит доступ с сервера, но, похоже, это не так.

Может кто-нибудь, пожалуйста, помочь мне и указать, что я сделал не так?

Заранее спасибо!

Вы кэшируете свой результат в self.form . self.form снова является FormSerivce элементом переменной Factory. Он будет кэшировать результат до тех пор, пока вы не обновите страницу. Как только вы обновите страницу, значение в self.form будет сброшено, как и все другие переменные в вашем приложении.

Вместо того, чтобы кэшировать результат self.form , кэшируйте его localstorage . Таким образом, вы можете получить результат обратно даже после обновления страницы.