angularjs在$document点击上关闭模态窗口

Question

我整天都在做这件事，但我被困住了。我有一个模式/对话框，当单击 div 时出现（该 div 在我试图创建排序选项的表中）。 div 触发 ng-click 并将 $scope 变量设置为 true 或 false。当单击 div 之外的任何位置时，我需要隐藏该模式。此外，还有多个显示模态的 div。如果单击另一个 div，则隐藏当前模态并使用该 $scope 再次显示模态。

<table>
 <thead>
  <th>Category 1 <div class="optionbox" ng-click="showModal($event)"></th>
  <th>Category 2 <div class="optionbox" ng-click="showModal($event)"></th>
  <th>Category 3 <div class="optionbox" ng-click="showModal($event)"></th>
 </thead>
</table>

我有一个用于监视由 showModal() 设置的值并显示的模式的指令。

$scope.showModal = function(event){
      $scope.isModalVisible = !$scope.isModalVisible;
}

模态指令：

angular.modal('app', []).directive('modal', function(){
      return {
         templateUrl : ..., 
         restrict : 'E',
         link : function($scope, element, attrs){
            ...
            $scope.$watch('isModalVisible', function(newVal, oldVal){
             if(newVal){
                element.slideUp(1000);
              }else{
                element.slideDown(1000);
              }
           }
        }

关闭模态指令（在模态模板中设置为属性）

angular.modal('app', []).directive('globalModalClose', function(){
      return {
         link : function($scope, element, attrs){
            $document.on('click', function(){
               if(element.find('event.target').length() < 1){
                 element.hide()
               }
            });
        }

我可能在这里遗漏了一些东西，但这是我的问题。我点击 div 会显示模态框，然后立即将其关闭。这是因为我的 showModal 函数在我的 $document.on 监听器之前被调用。我可以1）让点击监听器先触发还是2）别的......

Answer 1

点击事件使 DOM 冒泡。因此，您的$document 的点击侦听器在模态打开后接收到打开模态的相同点击事件。

您可以使用event.stopPropagation() 阻止事件在 DOM 中进一步向上冒泡到其他点击侦听器。 Angular 允许将 $event 传递给 ng-click 函数（正如您在 HTML 中看到的那样，您使用 ng-click="showModal($event)" 传递。

因此，应用到您的代码中，您可以：

$scope.showModal = function(event) {
  event.stopPropagation();
  $scope.isModalVisible = !$scope.isModalVisible;
};