Question

经过大量研究后，我发现了以下答案，它与我的代码非常匹配，并清楚地解释了如何使用共享服务（使用缓存和承诺）在控制器之间共享数据。

https://stackoverflow.com/a/17472995/2341148

然而，这个答案（以及我能找到的所有其他答案）并未说明如何使每个控制器保持同步。当一个控制器中的某些内容发生变化时，我希望其他控制器重新加载/刷新它们的数据。

例如，假设控制器“test”将一些数据提交给服务器以更新用户名。现在控制器“test1”显示一个不同的名称，因为它有自己的范围。如何让“test1”重新加载服务以获取最新数据（不刷新整个页面）？

当test1更改数据时，有人可以扩展此代码以使测试重新加载服务吗？

 var app = angular.module('plunker', []);

      app.service('cache', function ($http,$q) {
          var mycache={};
          return {
              getdata: function (key) {
                  var deferred = $q.defer();
                  if (mycache[key]) {
                      deferred.resolve(mycache[key]);
                  }
                  else {
                      $http.get('TextFile.txt').then(function (data) {
                          mycache[key] = data.data;
                          deferred.resolve(mycache[key]);
                      });
                  }
                  return deferred.promise;
              }
          }
      });


      app.controller('test', function ($scope, cache) {
          cache.getdata('cache').then(function (data) {
              $scope.data = data;
          });
     });

       app.controller('test1', function ($scope, cache) {
          //since data is already cached now it will server the cached data
          cache.getdata('cache').then(function (data) {
              $scope.data = data;
          });
     });

Answer 1

我从服务中拍摄了一个事件。看起来有点像这样。

.service("Data", function($http, $rootScope) {
  var this_ = this, 
      data;

  $http.get(some_url, function(response) {
    this_.set(response.data);
  }

  this.get = function() {
    return data;
  }

  this.set = function(data_) {
    data = data_;
    $rootScope.$broadcast('event:data-change');
  }

});

控制器就像这样与服务进行通信

$rootScope.$on('event:data-change', function() {
    $scope.data = Data.get();
}

$scope.update = function(d) {
  Data.set(d);
}

Angularjs使用共享服务自动刷新控制器

1 个答案: