角：在第二个电话$资源更新消防PUT请求只 [英] Angular: $resource update fire PUT request on second call only

问题描述

我有一个自定义更新方法的资源：

I have a resource with a custom update method :

angular.module('user.resources', ['ngResource']).
factory('User', function($resource) {
  var User = $resource('/user/:id', {}, {
    update: {
      method: 'PUT'
    }
  });

  User.prototype.update = function(cb) {
    console.log('foo');
    return User.update({
      id: this._id
    }, angular.extend({}, this, {
      _id: undefined
    }), cb);
  };

我通过范围传递这一资源到自定义指令：

I'm passing this resource to a custom directive via scope:

directive('avatarUpload', function($http) {
  return {
    restrict: 'E',
    scope: {
      model: '='
    }, ...

和我打电话的指令控制器上的BTN点击更新方法：

and I'm calling the update method in the directive controller on a btn click:

$scope.model.update(function() {
  console.log('bar');
});

这困扰我大气压行为是单击按钮，在第一时间打印'富'而不是'酒吧'，点击它第二次印刷吧'，然后'富'。更多的点击总是打印栏，然后'富'。

The behavior which puzzle me atm is that clicking on the button the first time print 'foo' but not 'bar', clicking it a second time print 'bar', then 'foo'. Any more click always print 'bar' then 'foo'.

的PUT请求只能从第二次点击发射和那些后，从来没有从第一。

The PUT request is only fired from the second click and the ones after, never from the first.

请注意：我一直在使用的控制器，资源更新的方法很好，直到试图从指令调用它。我使用的角度1.1.4
我做这个资源传递，因为我想要的指令在不同资源类型的工作。

Note: I've been using that resource update method fine in controllers, until trying to call it from a directive. I'm using angular 1.1.4 I do this resource passing because I want the directive to work on different type of resource.

推荐答案

这是很难肯定的说没有看到现场code的例子，但我$您正在使用AngularJS从1.1.x的系列P $ psume（所谓的不稳定分支）。如果是这样，你面临的问题是联系在一起的新功能在AngularJS - HTTP在1.1.4版本中引入的请求拦截器（此<一个href=\"https://github.com/angular/angular.js/commit/4ae46814ff4e7c0bbcdbbefc0a97277283a84065\">commit).

It is hard to say for sure without seeing live code example but I presume that you are using AngularJS from the 1.1.x series (so called "unstable branch"). If so, the problem you are facing is linked to the new feature in AngularJS - HTTP request interceptors introduced in version 1.1.4 (this commit).

新推出的请求拦截器是 $ Q 基于（承诺为基础）和AngularJS世界的承诺只解析为部分 $摘要周期。换句话说，你需要在AngularJS世界（ $摘要循环）的承诺得到解决。

The newly introduced request interceptors are $q-based (promise-based) and in AngularJS world promises are only resolved as part of the $digest cycle. In other words you need to be in the "AngularJS world" ($digest cycle) for the promises to be resolved.

通过基于承诺请求拦截器也可以由 $ HTTP 调用之前需要解决的承诺。由于如前所述之前，当你进入 $消化周期这个承诺才能解决。如果你正在发起这不会发生在 $ HTTP 从AngularJS的（DOM事件，setTimeout的等）之外。

With the promise-based request interceptors there is a promise to be resolved before a $http call can be made. As as noted before this promise can only be resolved when you enter the $digest cycle. This won't happen if you are initiating the $http from outside of AngularJS (DOM event, setTimeout etc.).

在AngularJS $资源基于 $ HTTP 所以上面的讨论适用于 $资源以及

In AngularJS $resource is based on $http so the above discussion apply to the $resource as well.

所以，presuming，上述假设是正确的，是你主动写 $资源呼叫从AngularJS之外（你正在谈论一个自定义的指令，所以我将赌注押在一个DOM事件）您应该简单地换行 $资源调入范围。$适用

So, presuming that the above assumptions are correct and you are initiating the $resource call from outside of AngularJS (you are talking about a custom directive so I would bet on a DOM event) you should simply wrap the $resource call into scope.$apply.

请注意，包裹 $资源调入 $超时（作为另一个反应的建议），同时将修复您的问题（它会强制$消化循环，从而将承诺得到解决）的这是不正确的做法的。问题是，这将迫使浏览器离开当前的JavaScript上下文，并进入重绘上下文无关。它会使你的应用程序速度较慢，可能会导致用户界面闪烁。

Please note that wrapping the $resource call into $timeout (as suggested in another response), while will "fix" your issue (it will force a $digest loop and thus promises will get resolved) it is not the correct approach. The problem is that it will force a browser to leave the current JavaScript context and enter the repaint context for nothing. It will make your application slower and may result in UI flickering.

这篇关于角：在第二个电话$资源更新消防PUT请求只的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！