单击事件不会导致对话框的删除

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和$document.bind('click', function(event))处理程序调用toggleSearchModes有什么区别，以及为了在第二种情况下渲染对话框的删除我该怎么办。

Answer 1

尝试更改它，以便单击事件在$范围中。$ apply

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