Question

当新记录添加到db / collection - $scope.list方法时，如何更新/刷新storage.set() - 请参阅代码中的注释。

请参阅以下代码。

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();

});

Answer 1

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

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

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

Answer 2

不是100％清楚你想做什么，而是假设存储只是在用户更新时才会更新（即不同位置的两个用户不可能改变相同的{{1} }），那么你的方法应该是：

在存储服务完成后，从存储服务中返回包含新存储对象的承诺，并在完成后使用stuff设置.then(function() {...})。

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

如果您在服务器端没有任何更改而没有来自该特定客户端的输入，那么我会考虑使用websocket（可能使用socket.io）来使其保持最新。

Answer 3

以下解决方案可行。但是，我不确定最佳做法是将其置于函数中并在需要时调用（在MainCtrl内）：

即：

首次加载

然后添加新项目后

.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();

});

Answer 4

你必须使用

$scope.list = Storage.get;

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

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

使用此方法，您将始终在范围

上具有Storage.get（）的当前状态

Answer 5

不能

return SetStuffHere(obj)

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

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

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

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

Answer 6

更新后端/工厂内容是通过调用set / post服务完成的基本Angular绑定。但是如果你想根据工厂中发生的变化自动刷新你的控制器变量（$ scope.list），那么你需要创建一个像函数一样的pooler并做类似的事情：

.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;

AngularJS - 将新记录添加到collection / db后刷新列表

6 个答案: