angularjs 在 $document 单击时关闭模式 window

Question

我整天都在为此工作，但我被困住了。单击 div 时会出现 modal/dialog（div 在 table 的第 th 个，我正在尝试创建排序选项）。 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;
};

angularjs 在 $document 单击时关闭模式 window

angularjs close modal window on $document click

javascript

controller

web-applications

angularjs