2

How do I update/refresh my $scope.list when a new record is added to the db/collection - storage.set() method - please see comment in the code.

Please see code below.

angular.module("app", [])

.factory('Storage', function() {

    var storage =  {};
    storage.get = function() {
        return GetStuffHere();
    }
    storage.set = function(obj) {
        return SetStuffHere(obj);
    }
    return storage;
})
.controller("MainCtrl", function($scope, Storage) {

    $scope.addStuff = function(){

        var obj = {
            "key1" : "data1",
            "key2" : "data2"
        };
        Storage.set(obj);
       // update $scope.list here, after adding new record
    }
    $scope.list = Storage.get();

});
4

6 回答 6

6

这是一种将接收到的数据作为数组存储在服务中的方法。它使用服务中的 Promise 来发送先前存储的数组（如果存在）或发出 HTTP 请求并存储响应。使用 $http 的 promise，它返回新存储的数组。

这现在允许在其他控制器或指令之间共享存储的数组。添加、编辑或删除时，现在在服务中存储的数组上完成。

app.controller('MainCtrl',function($scope, Storage){
  Storage.get(function(data){
    $scope.items=data
  });

  $scope.addItem=function(){
    Storage.set({name: 'Sue'});
  }
})

app.factory('Storage', function($q,$http) {

    var storage =  {};
    storage.get = function(callback) {
      /* see if already cached */
      if( ! storage.storedData){
        /* if not, get data from sever*/
        return $http.get('data.json').then(function(res){
          /* create the array in Storage that will be shared across app*/
          storage.storedData=res.data;
          /* return local array*/
          return storage.storedData
        }).then(callback)
      }else{
        /* is in cache so return the cached version*/
        var def= $q.defer();
        def.done(callback);
        defer.resolve(storage.storedData);
        return def.promise;
      }


    }
    storage.set = function(obj) {
     /* do ajax update and on success*/
        storage.storedData.push(obj);
    }
    return storage;
})

DEMO

于 2013-11-12T14:47:00.230 回答
4

不是 100% 清楚你想要做什么，但假设存储只会在用户更新它时更新（即，不同位置的两个用户不可能改变相同stuff），那么你的方法应该是到：

  • 完成后从存储服务返回一个包含新存储对象的承诺，并在完成后.then(function() {...})用于设置$scope.list。

    如果存储服务以某种方式改变了需要在前端反映的信息（例如，id用于处理未来交互的一个被添加到对象中），您将希望采用这种方法。请注意，$http默认情况下调用会返回一个承诺，因此如果您使用 Web 服务进行存储，这并不是太多额外的代码。

  • 调用对象后，只需将对象添加到行列表中$scope.list.push(obj)

如果您在没有来自该特定客户端的输入的情况下在服务器端发生了更改，那么我会考虑使用 websocket（也许使用 socket.io）来保持它是最新的。

于 2013-11-12T14:40:51.360 回答
1

下面的解决方案将起作用。但是，我不确定将它放在一个函数中并在需要时调用（在 内MainCtrl）是否是最佳做法：

IE：

  • 首次加载时

  • 然后在添加新项目后

    .controller("MainCtrl", function($scope, Storage) {

$scope.addStuff = function(){

    var obj = {
        "key1" : "data1",
        "key2" : "data2"
    };

    Storage.set(obj);

    // rebuild $scope.list after new record added
    $scope.readList();

}

// function to bind data from factory to a $scope.item
$scope.readList = function(){
    $scope.list = Storage.get();
}

// on first load
$scope.readList();

});
于 2013-11-12T13:55:32.220 回答
0

不能

return SetStuffHere(obj)

也只返回更新的列表？并指定：

$scope.list = Storage.set(obj);

如果这是一个返回单个插入项的 API 端点，您可以将其 push() 到 $scope.list 对象。

但也许我错过了你想做的事情......

于 2013-11-12T14:06:46.327 回答
0

你必须使用

$scope.list = Storage.get;

然后在模板中你可以使用 ie

<ul>
  <li ng-repeat="item in list()">{{whateverYouWant}}</li>
</ul>

使用这种方法，您将始终在范围内拥有 Storage.get() 的当前状态

于 2013-11-12T13:49:15.223 回答
0

更新后端/工厂的东西是通过调用 set/post 服务完成的基本 Angular 绑定。但是，如果您想根据工厂中发生的更改自动刷新控制器变量（$scope.list），那么您需要创建一个类似池的函数并执行以下操作：

.run(function(Check) {});

.factory('Storage', function() {

     var storage =  {};

     var Check = function(){
           storage = GetStuffHere();
           $timeout(Check, 2000);
     }

    // set...

    Check();
    return storage;

 })

 .controller("MainCtrl", function($scope, Storage) {

     $scope.list = Storage.storage;
于 2013-11-12T14:25:18.073 回答