文档单击事件不会呈现对话框的删除

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 属性）并做完全相同的事情，即删除对话框.这次也显示在屏幕上。对话框消失。

从按钮的 ng-click 调用 toggleSearchModes 和从 $document.bind('click', function(event)) 处理程序调用 toggleSearchModes 有什么区别，我该怎么做才能在第二个对话框中呈现对话框的删除案例.

Answer 1

尝试更改它，使点击事件在 $scope.$apply

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

文档单击事件不会呈现对话框的删除

Document click event does not render deletion of dialog

jquery

angularjs

bootstrap-popover

jquery-events