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()
               }
            });
        }

我可能在这里遗漏了一些东西，但在这里＆＃39;我的问题。我点击div显示模态，然后立即关闭它。这是因为我的$ document.on监听器之前调用了我的showModal函数。我可以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;
};

angularjs关闭$ document上的模态窗口

1 个答案: