Question

我认为这似乎是一个显而易见的问题，但我的大脑似乎有点油腻。

我有资源

Book = $resource("/books/:id", {id: "@id"});
book = Book.get(1);

我想刷新对象以从服务器获取更改。我知道我可以通过重复book = Book.get(book.id)来做到这一点，但这意味着页面上正在关注book的所有内容都会暂时被取消，直到查询返回并且对其进行操作的函数可能会崩溃。

我希望为查询从服务器返回时更新任何已更改字段的实例添加重新加载方法。到目前为止，我最好的尝试是：

$reload = function() {
    var model = this;

    Book.get(model.id, function(data) { // success
      angular.forEach(data, function(value, key) {
          model[key] = value;
      }
    }
}

两个问题 a）这是“有角度”的方式吗，还是有更优雅的方式？ a）如何在定义资源时添加此$ refresh方法，以便它包含在每个创建的实例中？

Answer 1

尝试扩展它的原型：

var Book = $resource("/books/:id", {id: "@id"});
Book.prototype.reload = function(callback) {
    return this.get(this.id, callback);
}

var book = Book.get(1);
book.reload(function(data){console.log(data);});

感谢：@ mathew-berg（Mathew Berg）对我的代码进行了修复。

Answer 2

有几点想法：

您的模型是如何构建的？来自$ resource文档：“如果数据从服务器到达，则对象将填充数据，并且视图会自动重新呈现，并显示新数据。”

在Angular Service中滚动您自己的API交互，以便您可以控制异步行为：

yourApp.factory('BookService', function($q) {

   //Other API calls here

   function reload() {
      var deferred = $q.defer();

      $http.get('/someUrl').
      success(function(data, status, headers, config) {
         //Massage your data here... then
         deferred.resolve(data);
      }).
      error(function(data, status, headers, config) {
         deferred.reject('There was a problem updating the books');
      });

      return deferred.promise;
   }

   return {
      reload: reload
   }
});

//In your conttroller or directive that holds your model
books = BookService.reload();

Answer 3

@ num8er的解决方案甚至不会在没有崩溃的情况下运行。也许我们正在使用不同版本的角度？（我目前在1.4.x上。）特别是，我必须将get()更改为$get()，但我还希望重新加载对象，而无需传入自定义回调从我称之为重载的地方捕获它，所以我将它添加到内部部分。

我必须这样做：

var Book = $resource("/books/:id", {id: "@id"});
Book.prototype.reload = function() {
    var book = this;
    book.$get(book.id, function (new_book) {
        book = new_book;  // replace old book object with newly reloaded one
    });
};

var book = Book.get(1);
book.reload();

正在监视的角度重新加载资源

3 个答案: