单击div的OUTSIDE时,不确定如何隐藏div

Question

这是此问题的后续问题:具有焦点的AngularJS输入会杀死列表的ng-repeat过滤器

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

我最初的想法是在抽屉打开时附加一个window.onclick处理程序,如果点击任何东西而不是抽屉,它应该关闭抽屉.这就是我在纯JavaScript应用程序中的表现.但在Angular中,它有点困难.

这是一个基于@Yoshi的jsBin示例的示例jsfiddle: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

抽屉未关闭,因为click事件发生在摘要周期之外,而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. 
    }
};

这是你的小提琴.

我也试图为搜索抽屉创建一个指令,如果它有帮助(它需要一些修复:)).这是一个JSBin.

Answer 2

我建议添加$ event.stopPropagation(); 在ng-click之后的视图上.您不需要使用jQuery.

<button ng-click="toggleSearch();$event.stopPropagation();">toggle</button>

然后,您可以使用此简化的js.

$scope.toggleSearch = function () {
    $window.onclick = null;
    $scope.menuOpen = !$scope.menuOpen;

    if ($scope.model.menuOpen) {
        $window.onclick = function (event) {
            $scope.menuOpen = false;
            $scope.$apply();
        };
    }
};