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

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

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显示模态，然后立即关闭它。 这是因为我的$ document.on监听器之前调用了我的showModal函数。 我可以1）让点击监听器先开火，或者2）其他东西......

Answer 1

click事件冒泡DOM。 因此，在模式打开后， $document的单击侦听器正在接收打开模式的相同单击事件。

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

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

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