$Digest已在进行中-AngularJS中的指令

Question

directive('ngUsername', ['$http', function($http) {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elm, attr, ctrl) {
        //when the scope changes, check the email.
        scope.$watch(attr.ngModel, function(value) {
            $http.get('http://tagsy.co/api/username?token=' + apiToken + '&username=' + value).success(function(data) {
                scope.$apply(function(s) {
                    ctrl.$setValidity('uniqueUsername', data.unique);
                });
            });
        });
    }
}
}]);

<input type="text" name="username" ng-model="username" placeholder="Username" ng-minlength="3" ng-maxlength="15" ng-pattern="/^[A-Za-z0-9]+$/" autocomplete="off" ng-username required/>

<div ng-show="registerForm.username.$dirty && registerForm.username.$invalid">
    <span class="error" ng-show="registerForm.username.$error.required">Please choose a username.</span>
    <span class="error" ng-show="registerForm.username.$error.minlength">Username is too short.</span>
    <span class="error" ng-show="registerForm.username.$error.maxlength">Username is too long.</span>
    <span class="error" ng-show="registerForm.username.$error.pattern">Username can only be letters and numbers.</span>
    <span class="error" ng-show="registerForm.username.$error.uniqueUsername">Username is already taken.</span>
</div>

Answer 1

在手动启动循环之前，可以使用$scope.$$phase检查循环是否正在进行。如果未设置$scope.$$phase，则可以安全地使用$apply:

scope.$watch(attr.ngModel, function(value) {
  $http.get('http://tagsy.co/api/username?token=' + apiToken + '&username=' + value).success(function(data) {
    if(!scope.$$phase)
        scope.$apply(function(s) {
                ctrl.$setValidity('uniqueUsername', data.unique);
        });
    else
      ctrl.$setValidity('uniqueUsername', data.unique);
  });
}

您可以重构以避免代码冗余，或者创建一个帮助器，如：

function safeApply($scope, applyFn) {
    if(!$scope.$$phase) $scope.$apply(applyFn)
    else applyFn();
}

scope.$watch(attr.ngModel, function(value) {
  $http.get('http://tagsy.co/api/username?token=' + apiToken + '&username=' + value).success(function(data) {
    safeApply(scope, function() {
      ctrl.$setValidity('uniqueUsername', data.unique);
    });
  });
}

编辑：这并不是说在这种情况下您应该这样做，因为$HTTP（和大多数角服务）将为您处理这件事。