Angularjs 1.5.x 在组件之间与服务共享数据答案

【问题标题】：Angularjs 1.5.x share data with service between componentsAngularjs 1.5.x 在组件之间与服务共享数据
【发布时间】：2017-02-21 23:50:48
【问题描述】：

我是 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 服务上的“来自服务器”。这样我就可以弄清楚我是从服务器还是内存中提取数据。但是，每次刷新，结果都不一样。有时，数据保存在服务中的局部变量中，并被“缓存”，但有时，我的某些页面会“从服务器”获取数据。

我想知道出了什么问题？我以为只有第一次服务会从服务器获取，但似乎不是这样。

有人可以帮我指出我做错了什么吗？

提前致谢！

【问题讨论】：

标签： angularjs service components init message-passing

【解决方案1】：

您正在将结果缓存到self.form。 self.form 又是一个变量 FormSerivce 工厂成员。它将缓存结果，直到您不刷新页面。刷新页面后，self.form 中的值将被重置，就像应用程序中的所有其他变量一样。

您想要的不是将结果缓存在self.form 中，而是将其缓存在localstorage 中。因此，即使在页面刷新后您也可以返回结果。

【讨论】：