Question

试图了解如何构建这个结构。

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

我失败了一个笨蛋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);
  };
});

我脑子里有一些解决方案，但似乎没有一个令人满意。动态复制属性可能会遇到问题（数组，日期，自定义对象等），让所有组件查询数据源本身非常繁琐，直接绑定到服务只是感觉不对。也许我应该总是返回一个具有.data属性的对象，这是我唯一改变的东西..... idk它似乎很傻，而且我错过了一些基本的东西。

我想制作某种动态属性装饰器（$ 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，它也会更改您的工厂。

Answer 2

你的掠夺者有几个问题：

您正在工厂中引用$ scope，这不会被注入。如果必须使用$ scope，请在初始化期间传递它
您没有引导角度：您需要在index.html

ng-app="app"

以下是您的plunker的修改工作版本：
http://plnkr.co/edit/B2NRza?p=preview

话虽如此，应该澄清在工厂或服务单例中使用scope用于促进属性的设置或在表单/控制器中调用方法。数据应存储在单例中的私有变量中，而不是scope。上面更新的plunker是您的问题的快速解决方案。在真实世界的应用程序中，$scope应存储在数组中，并在使用以下方式销毁范围时删除：

scope.$on('$destroy', function () {...})

以下示例警报服务，演示如何在服务中使用$scope： http://plnkr.co/edit/rQaWnmbvYFhm5htCXAAc?p=preview

缓存数据和数据绑定 - AngularJs

2 个答案: