Question

我有一个连接到外部JavaScript API的Angular指令。由于API调用未包含在Angular中，因此我需要调用$scope.$apply来应用API调用中的更新。

我在指令的link函数中执行此操作：

function link(scope, element, attrs) {
  externalService.doSomethingInteresting(
    function(result) {
      scope.$apply(function() {
        scope.applyResult(result);
      });
    }
  );
}

我为我的测试假装了这个服务，只是使用一些预制数据调用回调：

function doSomethingInteresting(callback) {
  callback(goodResult);
}

当我测试此指令（Karma + Jasmine）时，我在Angular testing guide中调用scope.$digest。

var rawElement = angular.element("<myDirective></myDirective>");
var element = compile(rawElement)(scope);

scope.$digest();

然而，这导致：

Error: [$rootScope:inprog] $digest already in progress

我理解这是因为$scope.apply与scope.$digest()电话相结合。如果我没有打电话给scope.$digest()，那么我的element就是空的。所以我不知道如何应用API调用的结果，但也准备好了编译的结果。

感谢任何指导。

Answer 1

您应该使用异步$timeout而非纯同步代码来模拟您的服务，这样您就无法获得Error: $digest already in progress。

module('myApp', function($provide){
  $provide.provider('myService', function() {
    this.$get = function($timeout) {
      return {

        // mock your service
        doSomethingInteresting : function(callback) {
          return $timeout(function() {
            callback(mockData);
          });
        }
      }
    }
  });
});

然后在创建指令scope.$digest()之后，刷新 $timeout以使回调执行。

Fiddle

测试Angular Directive To External API：$ apply和$ digest

1 个答案: