AngularJS：如何正确更新服务中的数据？_Angularjs_Angularjs Service

AngularJS：如何正确更新服务中的数据？

angularjs

AngularJS：如何正确更新服务中的数据？,angularjs,angularjs-service,Angularjs,Angularjs Service,用异步数据填充服务（实际上是工厂）没有问题。但是，更新服务中数据的正确方法是什么我遇到的问题是，所有异步数据都是通过.then（）方法访问的，这基本上是一个承诺解决方案。现在，我如何将某些内容放入服务中，并更新相关视图我正在使用的服务： function ($q) { var _data = null; return { query: function (expire) { var defer = $q.defer();

用异步数据填充服务（实际上是工厂）没有问题。但是，更新服务中数据的正确方法是什么

我遇到的问题是，所有异步数据都是通过

.then（）

方法访问的，这基本上是一个承诺解决方案。现在，我如何将某些内容放入服务中，并更新相关视图

我正在使用的服务：

function ($q) {
    var _data = null;
    return {
        query: function (expire) {
            var defer = $q.defer();
            if (_data) {
                defer.resolve(response.data);
            } else {
                $http.get('/path').then(function (response) {
                    defer.resolve(response.data);
                });
            }
            return defer.promise;
        }
        ,
        byId: function(id) {
            var defer = $q.defer();
            this.query().then(function(data){
                angular.forEach(data, function(item) {
                    if (item.id == id) {
                        return defer.resolve(item);
                    }
                });
                return defer.reject('id not found');
            });
            return defer.promise;
        }
        ,
        add: function(item) {
            ...
        }
    };
}

add

方法的良好实现是什么？请注意，我使用的是

Angular>1.2

我发布了一些示例，以展示如何将服务中的数据获取到控制器中，从而允许在视图中绑定数据

HTML

<!DOCTYPE html> <html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.4" src="http://code.angularjs.org/1.2.3/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>   </head>

  <body ng-app="myApp">
    <div ng-controller="MyCtrl">
      {{sharedData.label}}
      <br>
      <input type="text"  ng-model="sharedData.label"/>
    </div>
    <div ng-controller="MyCtrl2">
      <input type="text"  ng-model="sharedData.label"/>
      <button ng-click="updateValue()">test</button>
    </div>
    <div ng-controller="MyCtrl3">
      <input type="text"  ng-model="sharedData.label"/>
      <button ng-click="updateValue()">test</button>
    </div>
    <div ng-controller="MyCtrl4">
      <input type="text"  ng-model="sharedData.label"/>
    </div>
       </body>

</html>

关于服务中的add方法，您希望它执行类似于get的操作，只需创建一个延迟方法，返回承诺，然后执行异步业务（http请求）。对于byId函数，您可能希望使用缓存版本（将查询调用返回的数据保存在服务的属性中）。这样，如果没有必要，就不需要每次都执行查询。

实际上，我已经在实际场景中缓存后端调用了。：）然后，一切延期。我会试一试的。然而，这是我自己的第一个想法，只是看起来“不对”。

angular.module("myApp", []).service("MyService", function($q) {
  var serviceDef = {};
  //It's important that you use an object or an array here a string or other
  //primitive type can't be updated with angular.copy and changes to those
  //primitives can't be watched.
  serviceDef.someServiceData = {
    label: 'aValue'
  };
  serviceDef.doSomething = function() {
    var deferred = $q.defer();

    angular.copy({
      label: 'an updated value'
    }, serviceDef.someServiceData);

    deferred.resolve(serviceDef.someServiceData);
    return deferred.promise;
  }
  return serviceDef;
}).controller("MyCtrl", function($scope, MyService) {
  //Using a data object from the service that has it's properties updated async
  $scope.sharedData = MyService.someServiceData;
}).controller("MyCtrl2", function($scope, MyService) {
  //Same as above just has a function to modify the value as well
  $scope.sharedData = MyService.someServiceData;
  $scope.updateValue = function() {
    MyService.doSomething();
  }
}).controller("MyCtrl3", function($scope, MyService) {
  //Shows using a watch to see if the service data has changed during a digest
  //if so updates the local scope
  $scope.$watch(function(){ return MyService.someServiceData }, function(newVal){
    $scope.sharedData = newVal;
  })
  $scope.updateValue = function() {
    MyService.doSomething();
  }
}).controller("MyCtrl4", function($scope, MyService) {
  //This option relies on the promise returned from the service to update the local
  //scope, also since the properties of the object are being updated not the object
  //itself this still stays "in sync" with the other controllers and service since
  //really they are all referring to the same object.
  MyService.doSomething().then(function(newVal) {
    $scope.sharedData = newVal;
  });
});