javascript - 缓存数据和数据绑定(bind) - AngularJs

Question

只是想弄清楚如何构建这个。

我有一些组件都需要相同的数据。因此，我定义了一个提供对该数据的访问的服务(.factory)。但是，如果我需要更新数据，我就会破坏所有绑定(bind)。

我的一次尝试失败了 here (知道我错过了什么吗？)但你可以在下面的代码中看到我的意思:

var app = angular.module("app", []);
app.factory("userState", function($scope)
{
  $scope.settings = {};

  $scope.update = function(data)
  {
    $scope.settings = data;
  };

  return {
            getSettings: function(){
                return $scope.settings;
            },
            updateData: function(data){
              $scope.update(data);
            },
            initialise: function(){
              var simulatingTheFirstAjaxCall = {};
              simulatingTheFirstAjaxCall.property = "hello world!";
              $scope.update(simulatingTheFirstAjaxCall);
            }
         };
});
app.controller("IndexController", function($scope, userState)
{
  userState.initialise();
  $scope.settings = userState.getSettings();

  $scope.simulateSecondAjaxCall = function()
  {
    var object = {};
    object.property = "goodbye world";
    userState.updateData(object);
  };
});

我脑子里有几个解决方案，但似乎没有一个令人满意。动态复制属性可能会遇到问题(数组、日期、自定义对象等)，让所有组件本身查询数据源非常麻烦，直接绑定(bind)到服务感觉不对。也许我应该总是返回一个具有 .data 属性的对象，这是我唯一改变的东西......我不知道这看起来很愚蠢，就像我错过了一些基本的东西。

我很想制作某种动态属性装饰器($scope.settings.inner = data;)，但我不确定这是否可能。

Answer 1

我认为你的问题是你在工厂内使用 $scope ，这是没有意义的，你不应该这样做。相反，有这样的东西。

app.factory('userState', [function(){
   return {
      setting1: true,
      setting2: false
   }
}]);

app.controller('myCtrl', ['$scope', 'userState', function($scope, userState){
   $scope.userState=userState;
   $scope.updateSettings= function(){
      //e.g. change one setting to false, will also update factory value
      $scope.userState.setting1=false;
   }
}]);

由于 JavaScript 中非原始对象是通过引用传递的，因此您可以更改 $scope.userState，它也会更改您的工厂。