javascript - 不确定如何在单击 div 外部时隐藏 div

Question

这是此问题的后续问题:AngularJS input with focus kills ng-repeat filter of list

基本上我的代码是使用 AngularJS 在右侧弹出一个 div(抽屉)来过滤事物列表。大多数情况下，使用此功能时，UI 会被阻止，因此单击该阻止的 div 会关闭抽屉。但在某些情况下，我们不会阻止 UI，并且需要允许用户单击抽屉外部以取消搜索或选择页面上的其他内容。

我最初的想法是在抽屉打开时附加一个 window.onclick 处理程序，如果单击抽屉以外的任何内容，则应该关闭抽屉。这就是我在纯 JavaScript 应用程序中的做法。但在 Angular 中，这就有点困难了。

这是一个 jsfiddle，其中包含我基于 @Yoshi 的 jsBin 示例的示例:http://jsfiddle.net/tpeiffer/kDmn8/

此示例的相关代码如下。基本上，如果用户在抽屉外单击，我会调用 $scope.toggleSearch 以便将 $scope.open 设置回 false。

代码有效，即使 $scope.open 从 true 变为 false，它也不会修改 DOM。我确信这与事件的生命周期有关，或者当我修改 $scope (因为它来自单独的事件)时，它是副本而不是原始的......

其最终目标是成为最终可重用性的指导。如果有人能指出我正确的方向，我将不胜感激。

$scope.toggleSearch = function () {

    $scope.open = !$scope.open;

    if ($scope.open) {
        $scope.$window.onclick = function (event) {
            closeSearchWhenClickingElsewhere(event, $scope.toggleSearch);
        };
    } else {
        $scope.$window.onclick = null;
    }
};

和

function closeSearchWhenClickingElsewhere(event, callbackOnClose) {

    var clickedElement = event.target;
    if (!clickedElement) return;

    var elementClasses = clickedElement.classList;
    var clickedOnSearchDrawer = elementClasses.contains('handle-right') 
        || elementClasses.contains('drawer-right') 
        || (clickedElement.parentElement !== null 
            && clickedElement.parentElement.classList.contains('drawer-right'));
    if (!clickedOnSearchDrawer) {
        callbackOnClose();
    }

}

Answer 1

抽屉没有关闭，因为单击事件发生在摘要周期之外，并且 Angular 不知道 $scope.open 已更改。要修复它，您可以在 $scope.open 设置为 false 后调用 $scope.$apply() ，这将触发摘要周期。

$scope.toggleSearch = function () {
    $scope.open = !$scope.open;
    if ($scope.open) {
        $scope.$window.onclick = function (event) {
            closeSearchWhenClickingElsewhere(event, $scope.toggleSearch);
        };
    } else {
        $scope.open = false;
        $scope.$window.onclick = null;
        $scope.$apply(); //--> trigger digest cycle and make angular aware. 
    }
};

这是您的Fiddle .

我还尝试为搜索抽屉创建一个指令，如果它有帮助的话(它需要一些修复:))。这是JSBin 。