Question

由于我是AngularJS和Javascript的新手......这可能是一个非常新手的问题。我正在尝试创建一个按钮，打开一个对话框（显示让我们说搜索模式），除了这个对话框之外我应该关闭它。这是我的代码：

在HTML文件中：

<div class="form-group dropdown-dialog">
  <button id="searchModesBtn" class="btn btn-sm btn-default pull-left" ng-click="$event.stopPropagation(); toggleSearchModes()"
          title="Open Search Modes"><i class="fa fa-bars"></i>
  </button>
  <tw-search-modes-dialog show="searchModesVisible" hide-fn="toggleSearchModes"
                          search-settings="searchModesDlg"
                          ng-click="$event.stopPropagation()">
  </tw-search-modes-dialog>
</div>

在JS文件中：

$scope.toggleSearchModes = function () {
  if (!$scope.searchModesVisible) {
    $scope.searchModesDlg = {};
  } else {
    delete $scope.searchModesDlg;
  }
  $scope.searchModesVisible = !$scope.searchModesVisible;
};

$document.bind('click', function(event) {
  if ($scope.searchModesVisible) {
    $scope.toggleSearchModes();
  }
});

为了避免混淆，该对话框被称为tw-search-modes-dialog，并在两个单独的文件（html / js）中作为弹出元素实现。如果我的JS文件的第二部分处理屏幕上任何地方的点击事件，以便关闭对话框。现在，除了一件事，一切都很好。我需要在对话框外单击两次才能关闭它。

调试代码后，我注意到当我第一次点击任意位置成功触发事件时，调用toggleSearchModes函数并删除对话框，但此删除不会呈现在屏幕上（对话框保持打开状态）。

当单击按钮而不是屏幕上的任何位置时，再次调用toggleSearchModes函数（这次来自ng-click属性）并执行完全相同的操作，即删除对话框。这次也在屏幕上显示。对话框消失。

从按钮的toggleSearchModes和ng-click处理程序调用{{1}}之间有什么区别？在第二种情况下，为了呈现对话框的删除，我该怎么做？

Answer 1

尝试更改它，以便click事件在$ scope中。$ apply

$document.bind('click', function(event) {
    $scope.$apply(function () {
         if ($scope.searchModesVisible) {
             $scope.toggleSearchModes();
         }
    });
});

文档点击事件不会删除对话框

1 个答案: