使用 ui.bootstrap scope.$watch & element.triggerHandler - 获取 - 错误：[$rootScope:inprog] $digest 已经在进行中

Question

我已经制定了一些指令来使引导弹出框在表单字段无效时发生。我遇到的唯一障碍是尝试将属性值“评估”为真或假，以便我可以调用打开或关闭弹出框。我是一个有角度的新手（只是学习），但做了一些研究，似乎使用 $scope.watch 是要使用的东西（以及查看 ng-show 和 ng-hide 代码）。所以一切正常，直到我尝试从 $scope.watch 中调用 element.triggerHandler() 并使用 bootstrap.ui。

这是我的指令：

app.directive('tooltipTriggerOn', ['$log', function($log) {
  function link(scope, element, attrs) {
    scope.$watch(attrs.tooltipShow, function(val) {
        if (val) {
          $log.info('trigger openPopup');
        } else {
          $log.info('trigger closePopup');
        }
      //if (val) element.triggerHandler('openPopup');
      //else element.triggerHandler('closePopup');
    });
  }
  return {
    restrict: 'A',
    link: link
  };
}]);

注释掉的 if/else 使应用程序可以正常运行。如果我启用这些行，我会收到 javascript 错误：

Error: [$rootScope:inprog] $digest already in progress
Error: a.$apply(...) is not a function

但是为什么呢？当我不使用 ui.bootstrap 时，这个小方案可以正常工作。所以：

1. 是否有在我的指令中使用 scope.$watch 而不出现错误的技巧？
2. 是否有其他方法可以在不使用 scope.$watch 的情况下“评估”指令属性？
3. 为什么会出现这个错误？

这里是plunkrs：

这个演示了 bootstrap.ui 的问题，只需取消注释问题中描述的有问题的 if 语句。

plunkr

这个演示了 $scope.watch 在没有 bootstrap.ui 的情况下工作

plunkr

任何帮助表示赞赏！

- 迈克

Answer 1

当我遇到$digest already in progress 错误，并且我无法以另一种方式重写代码来避免该问题时，我将$timeout(function(){...}) 包裹起来。这会导致包装代码在当前摘要周期之后执行（因此它不在进行中）。

另请参阅“AngularJS : Prevent error $digest already in progress when calling $scope.$apply()”（第二次回复）

  $timeout(function(){
    if (val) element.triggerHandler('openPopup');
    else element.triggerHandler('closePopup');
  });

工作演示：http://plnkr.co/edit/STaPZI2f9eTaRhnsr6Qm?p=preview