Angular 重新加载正在观看的资源

Question

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

我有资源

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

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

我想向实例添加一个重新加载方法，一旦从服务器查询 returns 就更新任何更改的字段。到目前为止我最好的尝试是：

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

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

两个问题 a) 这是 "angular" 的方法，还是有更优雅的方法？ 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 文档："Having an empty object results in no rendering, once the data arrives from the server then the object is populated with the data and the view automatically re-renders itself showing the new data."

在 Angular 服务中滚动您自己的 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 的解决方案甚至运行都会让我崩溃。也许我们使用的是不同版本的 angular？（我现在在 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();

Angular 重新加载正在观看的资源

Angular reload resource that is being watched

javascript

angularjs

angular-resource