angularjs - 使用typeahead插件时$apply已经进行中错误(发现与ng-focus + ng-blur有关)

Question

我的主要问题是错误没有指向我的代码中的任何位置，并且我们的项目中没有那么多 $apply 调用。 似乎生成错误的代码:

 <input type="text" 
  placeholder="{{ $root.pg.t('HEADER.CITY_OR_POSTAL') }}"
  data-ng-focus="decideToStop();" data-ng-blur="decideToStart()"
  data-ng-model="search.selected" 
  typeahead-on-select="search.locationQuery(geo_locations, search.selected)" 
  typeahead="location.name for location in getLocations($viewValue) | filter: $viewValue | limitTo:8" class="semi-bold">

在 Controller 中:

$scope.decideToStop = function(){
  if($scope.actionTimeout){
    $timeout.cancel($scope.actionTimeout);
    $scope.actionTimeout = {};
  }


  $scope.MyService.CustomMethodThatDoesALotOfThings();
};


$scope.decideToStart = function(){
  if(CustomCondition()){
    $scope.actionTimeout = $timeout(function(){
      $scope.MyService.AnotherCustomMethodThatDoesALotOfThings();

    }, 150);

  }
};

$root.pg 只是目前放置在 rootScope 中的服务内的 polyglot.js 库。 search是位置搜索对应的服务。

当我更改输入字段中的城市时，出现错误。我不知道如何调试这个...

Answer 1

这是同时使用 ng-focus 和其他事件指令时出现的问题。大多数情况下，当您使用事件指令(ng-click、ng-blur)之一来聚焦具有 ng-focus 的元素时，就会发生这种情况。这实际上是一个错误，但您可以轻松修复它。最好的选择是编写自己的指令来应用异步函数:

app.directive('ngFocusAsync', ['$parse', function($parse) {
  return {
    compile: function($element, attr) {
      var fn = $parse(attr.ngFocusAsync);
      return function(scope, element) {
        element.on('focus', function(event) {
          scope.$evalAsync(function() {
            fn(scope, {$event:event});
          });
        });
      };
    }
  };
}]

)

如果您不想这样做，您可以获取指令的内容并手动将其应用到您的元素，但由于该指令非常小，因此该指令更可取。当这个问题在核心中得到解决后，您就可以简单地替换所有声明。

请参阅此处的示例:http://plnkr.co/edit/GBdvtN6ayo59017rLKPs?p=preview如果您将 ng-focus-async 替换为 ng-focus，则当您单击按钮或模糊第二个输入字段时， Angular 将会抛出。