正在监视的 Angular 重新加载资源答案

【问题标题】：Angular reload resource that is being watched正在监视的 Angular 重新加载资源
【发布时间】：2015-09-23 21:57:48
【问题描述】：

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

我有资源

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

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

我想向实例添加一个 reload 方法，该方法在查询从服务器返回后更新任何更改的字段。到目前为止，我最好的尝试是：

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

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

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

【问题讨论】：

标签： javascript angularjs angular-resource

【解决方案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) 对我的代码进行了修复。

【讨论】：

【解决方案2】：

一些想法：

您的模型结构如何？来自 $resource 文档：“拥有一个空对象不会导致渲染，一旦数据从服务器到达，那么该对象就会被数据填充，并且视图会自动重新渲染自身以显示新数据。”

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

【讨论】：

【解决方案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();

【讨论】：