首页 文章

angularjs关闭$ document上的模态窗口

提问于
浏览 次
0

我一整天都在努力，而且我被困住了 . 我有一个模式/对话框，当单击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）其他东西......

javascript angularjs web-applications controller

1 回答

  • 0

    click事件冒泡DOM . 因此，在模态打开后， $document 的点击监听器正在接收打开模态的相同点击事件 .

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

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

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

相关问题