Javascript 在angularjs中共享和保存来自多个控制器的数据

我似乎不知道该怎么解决这个问题：

我有多个角度控制器，它们都需要一个用户对象，它们可以使用该对象进行操作，每次它被操作时，“新”数据也需要在其他控制器中输出。同时，我需要将这个用户对象保存在数据库中，以便以后检索（因此，当用户对象上的数据发生更改时，可以使用自动保存功能）

但是我似乎不知道我应该使用工厂还是服务来保存这个用户对象，以及如何让这个工厂/服务通过API保存用户的更改

我读了这个例子，他想完成一些相同的事情，但API部分和异步自动保存确实给我带来了麻烦

底线是，我有多个控制器，需要服务器端的用户对象。这些控制器使用相同的用户对象进行操作，在每次操作之后（可能使用一些去抖动），我想通过API将对象保存到数据库中

（首先，我想在服务/工厂中观察对象，但发现我不能：（）

---

你们能给我指出正确的方向吗？

当在控制器之间共享数据时，服务是一种方式。你们似乎已经对此有了很好的想法

---

为了在每次操作后保存用户，我不明白问题是什么。创建一个modify user方法，然后可以进行对象比较。如果存在差异，请将PUT请求发送到api。

创建服务还是工厂实际上是一个设计问题

您可能希望查看库，例如，或，它可以帮助您创建将模型与API端点关联以获取和保存的服务

异步自动保存可以在服务中或控制器上解决

披露：我是ThickM的作者

创建

用户

对象（通过服务或工厂）

将该对象注入任何想要与其交互的控制器

<> LI>代码> $WistRe/Cux>该对象（从服务本身内部考虑，如果您认为该功能是<代码>用户< /COD>实体的核心部分），并且在检测到更改时（可选地带有反跳）更新后端。

对于

$watch

从服务内部插入内容，您可以插入

$rootScope

服务

请记住（在真实的应用程序中）您需要考虑错误和死角情况。例如，如果用户在去盎司周期结束前离开页面会发生什么情况等

下面是一个简单的POC实现。在现实世界中，您可能希望使用模块（如中提到的模块）并将yur服务包装在其周围，以便在与RESTful数据源交互时保存大量样板代码。

---

演示服务可能如下所示：

.factory('User', function ($q, $rootScope, $timeout) {
    var apiEndpoint = '/api/user';
    var guest = {
        username: 'Guest',
        email   : null,
        loggedIn: false
    };
    var user = {};

    user.login = function (credentials) {
        user.logout();

        // In real app: Make a login request
        var request = $q.defer();
        $timeout(function () {
            user.username = 'ExpertSystem';
            user.email    = 'expert@system';
            user.loggedIn = true;
            request.resolve(user);
        }, 1000);

        return request.promise;
    };

    user.logout = function () {
        // In real app: Make a logout request
        angular.extend(user, guest);
    };

    user.update = function () {
        // In real app: Make a request to update user info
        alert('Updating the backend...');
    };

    var updateTimeout;
    user.updateWithDebounce = function () {
        $timeout.cancel(updateTimeout);
        updateTimeout = $timeout(function () {
            user.update();
        }, 1000);
    };

    $rootScope.$watchCollection(function () {
        return user;
    }, function (newValue, oldValue) {
        var shouldUpdate = newValue && newValue.loggedIn &&
                           oldValue && oldValue.loggedIn;
        // Immediate backend update
        //if (shouldUpdate) user.update();

        // Debounced backend update (1 sec debounce)
        if (shouldUpdate) user.updateWithDebounce();
    });

    user.login();

    return user;
});

---

---

另请参见此

我建议您始终使用服务/工厂在控制器（以及指令）之间共享数据，并在两侧注入数据

之后，只需使用承诺解析函数来更新服务值

app.factory('SharedService', function() {
  return {
    sharedObject: {
      value: '',
      value2: ''
    }
  };
});

app.controller('FirstCtrl', function($scope, SharedService) {
  $scope.model = SharedService.sharedObject;
});

app.directive('myDirective',['SharedService', function(SharedService){
  return{
    restrict: 'E',
    link: function(scope){
      scope.model = SharedService.sharedObject;
    },
    template: '<div><input type="text" ng-model="model.value"/></div>'
  }
}]);

app.factory（'SharedService'，function（）{
返回{
共享对象：{
值：“”，
值2:“”
}
};
});
app.controller（'FirstCtrl'，函数（$scope，SharedService）{
$scope.model=SharedService.sharedObject；
});
应用程序指令（'myDirective'，['SharedService'，函数（SharedService）{
返回{
限制：'E'，
链接：功能（范围）{
scope.model=SharedService.sharedObject；
},
模板：“”
}
}]);

下面是一个plunkr，展示了如何实现：

---

但是我应该在哪里创建这种比较呢？在我的小幻想中，我是否希望在控制器中执行类似的操作：$scope.user.name.lastName=“Hansen”；（甚至是绑定到输入字段的ng模型）然后在服务中“捕获”更改，并通过工厂保存数据。但是服务如何看到有更改呢？我想要一个控制器$watch，但在服务中我不能。如果将服务注入到控制器中，您可以轻松访问它。ServiceName.user.name.lastName='abc'或者更好的一个用户对象ServiceName.user.editName（{lastName:'abc'}）。该对象可能包含一个比较函数，编辑函数可以在应用更改后调用该函数。虽然我遇到了一个问题，即工厂数据是异步获取的，而且控制器似乎无法从我工厂的$http.get.Great示例中获取获取数据。尝试将其混合后，我重新开始，并你的代码和我的混合在一起。它工作得很好。我只是要习惯控制器中我的用户对象的想法，它有属性和方法。非常感谢！