AngularJS在$ interval上轮询$资源并不能自动解析$ resource返回的promise

时间:2014-09-03 01:21:34

标签: javascript angularjs angular-resource angular-promise

所以,重要的一点: 当我将控制器中的$ scope变量直接绑定到$ resource时,角度自动承诺解析接管并且一旦数据从服务返回,我的视图就会更新。但是,我需要在一段时间内轮询服务器以获取更新。尝试绑定$ interval调用返回的promise不会触发角度自动承诺解析,我不知道是否有一些事情可以让$ $ interval对$资源起作用。

Angular客户端,ASP.NET WebApi服务JSON,Angular $资源坐在WebApi上。在我的角度控制器中,如果我将$ scoped变量直接绑定到我的$ resource promises,我得到结果;但是,我需要我的$资源以$间隔更新,并且我在引入间隔时遇到问题。

工作,需要手动刷新"代码(相关部分,至少)

'use strict';
var ctrls = angular.module('MyModule',[]);
ctrls.controller('FooCtrl', ['$scope', '$location','service',
  function( $scope,$location,service)
  {
     $scope.Bars = service.Bars;
     $scope.Baz = service.Baz;
  }

var app = angular.module('MyModule.Services',['ngResource']);
app.service('service', ['$resource', function($resource)
{
  var proxy = $resource(
       'http://server/subsystem/api/Foo/:component',
        {},
        {
           Bars: {method:'GET',isArray:false,url: 'http://server/subsystem/api/Foo/Bars'
          ,Baz: {method:'GET',isArray:false,rul: 'http://server/subsystem/api/Foo/Baz'
        }
  return proxy;
}]);
等等,在我看来,ng-repeat绑定在酒吧"酒吧" =数据到屏幕。

所以现在,我进入我的控制器来实现我的间隔,我可以让间隔工作,但承诺无法解决。

控制器内部的更改(请注意,我将$ interval和$ document添加到我的依赖列表中:

var stop;
$scope.Bars = {};
$scope.Baz = service.Baz; //Note that angular resolves this promise automatically.
$scope.pollService = function(){
   if(angular.isDefined(stop))return;
   stop = $interval(function(){
     if(service){
        $scope.Bars = service.Bars;
     }
   },1000);
};
$scope.stopPolling = function(){
   if(angular.isDefined(stop)){
     $interval.cancel(stop);
     stop = undefined;
   }
};
$scope.$on('$destroy',function(){
   $scope.stopPolling();
});
$document.ready(function(){
   $scope.pollService(); //when I attempt to execute my .then() on pollService(), I get "cannot 
                         //call then on undefined"
});

修改

请注意,我遇到的问题是将$ scope.Bars直接绑定到service.Bars会触发angular的自动承诺解析,但是引入$ interval调用似乎不是。在Chrome开发工具中检查$ scope.Bars表明它是一个未解决的承诺。

我更新了示例代码以匹配我目前在调试器中的代码。我在我的资源上定义了几个属性,并且我包含了一个我命名为“Baz'”的属性。如果我直接在我的控制器中分配$ scope.Baz = service.Baz,那么当angular解析了promise时,视图会绑定到它,但是间隔中的那个从不这样做。

1 个答案:

答案 0 :(得分:0)

您没有从promise返回$scope.pollService。只需在函数末尾添加return stop;即可。另请注意,API的编写方式如果定义了undefined,您的函数仍会返回stop

因此,它应该看起来像:

$scope.pollService = function(){
   if(!angular.isDefined(stop)) {
       stop = $interval(function() {
         if(service){
            $scope.Bars = service.Bars;
         }
       }, 1000);
  }

  return stop;
};

stop也不是一个非常好的描述性名称......

编辑:

根据我在阅读文档后的理解,您应该在$scope.Bars = service.Bars();等服务上调用操作方法。这将返回一个对象,一旦解析了promise,最终将填充数据。但是,我认为你在这里也需要小心,因为如果间隔比你的解决率更快,你可能会遇到问题。我认为你最好使用$timeout