获取AngularJS错误:" [$ rootScope:inprog] $ digest已在进行中"没有手动$申请

时间:2014-02-18 15:55:15

标签: angularjs angularjs-service angularjs-controller angularjs-http

此错误的其他帖子总是包含某人尝试申请$而不使用安全申请,但在我的示例中并非如此。我的功能是成功返回我从API请求的数据,但我无法清除这个错误,这让我疯狂。 每次在$ http函数中调用.success之前,我都会在控制台中看到“错误:[$ rootScope:inprog] $ digest已在进行中”。以下是我的控制器和服务。谢谢!

这是我的服务,包括使用有效负载发布$ http呼叫的功能:

Services.service( 'CoolService', ['$q', '$rootScope', '$http', 'Auth', function($q, $rootScope, $http, Auth){
var service = {
    create: function(payload){
        var deferred = $q.defer();
        $http({
            'url': '/api/endpoint/',
            'dataType':'json',
            'method': 'POST',
            data: payload
        }).success(function(data,status, headers, config){
            deferred.resolve(data);

        })
        .error(function(data, status, headers, config){
            deferred.reject("Error in request.");
        });
        return deferred.promise;
        }
    }
    return service;
}]);

这是我的控制器调用服务:

controllers.controller('CoolCtrl',['$scope', '$modal', '$log','CoolService', function($scope, $modal, $log, CoolService){
    getCoolData = function (input_data) {
        CoolService.create(input_data).then(function(results){
            new_cool = results.results;
        }, function(error){
        console.log("there was an error getting new cool data");
        });
    };
    var payload = {
        user_id: data1,
        cool_id: data2,
    }
    var new_cool_data = getCoolData(payload);
    console.log(new_cool_data);
}]);

在异步操作之前调用var new_cool_data下面的日志,但是在getCoolData中的.then语句中会分配new_cool。 任何帮助摆脱这个错误或使其一般不蹩脚的任何帮助将非常感谢!

这是整个错误: https://gist.github.com/thedore17/bcac9aec781ef9ba535b

4 个答案:

答案 0 :(得分:7)

添加这个小方法并将其称为apply()

function CheckScopeBeforeApply() {
    if(!$scope.$$phase) {
         $scope.$apply();
    }
};

答案 1 :(得分:0)

这为我解决了这个问题。只需添加一次,您就不需要再更改代码了:

https://github.com/angular/angular.js/issues/10083#issuecomment-145967719

.config(function($provide) {
  // Workaround for https://github.com/angular/angular.js/issues/10083
  $provide.decorator('$rootScope', ['$delegate', '$exceptionHandler',
    function($delegate, $exceptionHandler) {
      var proto = Object.getPrototypeOf($delegate);
      var originalDigest = proto.$digest, originalApply = proto.$apply;
      proto.$digest = function() {
        if ($delegate.$$phase === '$digest' || $delegate.$$phase === '$apply') return;
        originalDigest.call(this);
      };
      proto.$apply = function(fn) {
        if ($delegate.$$phase === '$digest' || $delegate.$$phase === '$apply') {
          try {
            this.$eval(fn);
          } catch(e) {
            $exceptionHandler(e);
          }
        } else {
          originalApply.call(this, fn);
        }
      };
      return $delegate;
    }
  ]);
})

答案 2 :(得分:0)

我使用替代解决方案,将$ scope。$ apply()放在超时内,就像这样,它有效......

 Admin::DashboardController < Admin::ApplicationController < ApplicationController

我认为这只是因为,角度的应用生命周期已经在运行,我的手动$ apply已经中断了它。

答案 3 :(得分:0)

有一个更简单的解决方案:

$scope.$evalAsync(function() {
    // Code here
});

或者简单地说:

$scope.$evalAsync();

这可以避免$ scope。$ apply()引起的问题,但应该注意它不会立即运行(这是你不会得到inprog错误的部分原因)。我使用它代替$ scope。$ apply()并且它让我免于这么多麻烦。

请参阅:https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope#$ evalAsync