不知道如何点击股利之外时，隐藏的div [英] Not sure how to hide a div when clicking OUTSIDE of the div

问题描述

这是一个后续问题这个问题：<一href=\"http://stackoverflow.com/questions/17678813/angularjs-input-with-focus-kills-ng-repeat-filter-of-list\">AngularJS重点投入杀死NG-重复列表的过滤器

基本上我的code使用AngularJS弹出出右侧一格（抽屉）用于过滤的事情的清单。大多数时候，这是使用的UI被闭点击阻断DIV关闭抽屉。但在某些情况下，我们不阻止UI和需要允许用户在抽屉的外点击取消搜索或选择一些页面上别的。

我最初的想法是，当抽屉打开，如果有什么点击以外的抽屉应该关上抽屉附加一个window.onclick处理程序。这就是我会做一个纯粹的JavaScript应用程序。但在角就是做有点难度。

下面是我在基于@ Yoshi的jsBin例如样品的jsfiddle： http://jsfiddle.net/tpeiffer/kDmn8/

从这个样品的相关一张code的如下。基本上，如果用户点击抽屉之外我调用$ scope.toggleSearch使设置$ scope.open回假。

在code的工作，即使在$ scope.open从真变为假不修改DOM。我敢肯定，这事做的事件或者当我修改$范围（因为它是从一个单独的事件）的生命周期，它是一个副本而不是原始...

在这个最终目标将是它成为最终的可重用性指令。如果任何人都可以点我在正确的方向做，我将不胜感激。

  $ scope.toggleSearch =功能（）{    $ scope.open = $ scope.open！;    如果（scope.open $）{
        $范围。$ window.onclick =函数（事件）{
            closeSearchWhenClickingElsewhere（事件，$ scope.toggleSearch）;
        };
    }其他{
        $ $范围= window.onclick空。
    }
};
 

和

 函数closeSearchWhenClickingElsewhere（事件，callbackOnClose）{    VAR clickedElement = event.target;
    如果回报（clickedElement！）;    VAR elementClasses = clickedElement.classList;
    VAR clickedOnSearchDrawer = elementClasses.contains（'柄权）
        || elementClasses.contains（'抽屉权）
        || （clickedElement.parentElement！== NULL
            ＆功放;＆安培; clickedElement.parentElement.classList.contains（'抽屉右'））;
    如果（！clickedOnSearchDrawer）{
        callbackOnClose（）;
    }}
 

解决方案

抽屉不打烊，因为点击事件发生的消化周期外角并不知道$ scope.open已经改变。要解决它，你可以调用$范围。$适用（）后，$ scope.open设置为false，这将触发消化周期。

  $ scope.toggleSearch =功能（）{
    $ scope.open = $ scope.open！;
    如果（scope.open $）{
        $范围。$ window.onclick =函数（事件）{
            closeSearchWhenClickingElsewhere（事件，$ scope.toggleSearch）;
        };
    }其他{
        $ scope.open = FALSE;
        $ $范围= window.onclick空。
        $ $范围适用于（）。 //  - ＆GT;引发消化周期，使角度认识。
    }
};
 

下面是你的小提琴。

我也试图创建的搜索抽屉指令，如果有帮助（它需要一些修复:)）。这里是一个 JSBin 。

This is a follow-up question to this question: AngularJS input with focus kills ng-repeat filter of list

Basically my code is using AngularJS to pop-out a div (a drawer) on the right for filtering a list of things. Most times this is used the UI is blocked so clicking on that blocking div closes the drawer. But in some cases we don't block the UI and need to allow the user to click outside of the drawer to cancel the search or select something else on the page.

My initial thought was to attach a window.onclick handler when the drawer opens and if anything is clicked other than the drawer it should close the drawer. That's how I would do it in a pure JavaScript app. But in Angular it is being a bit more difficult.

Here is a jsfiddle with a sample that I based on @Yoshi's jsBin example: http://jsfiddle.net/tpeiffer/kDmn8/

The relevant piece of code from this sample is below. Basically if the user clicks outside of the drawer I invoke $scope.toggleSearch so that $scope.open is set back to false.

The code works, and even though the $scope.open goes from true to false it doesn't modify the DOM. I'm sure this has something to do with the lifecycle of events or perhaps when I modify $scope (since it is from a separate event) that it is a copy and not the original...

The ultimate goal on this will be for it to be a directive for ultimate reusability. If anyone can point me in the right direction to do that I would be grateful.

$scope.toggleSearch = function () {

    $scope.open = !$scope.open;

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

and

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();
    }

}

解决方案

The drawer is not closing because the click event occurs outside the digest cycle and Angular doesn't know that $scope.open has changed. To fix it you can call $scope.$apply() after $scope.open is set to false, this will trigger the digest cycle.

$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. 
    }
};

Here is your Fiddle.

I was also trying to create a directive for the search drawer, if it helps (it needs some fixes :)). Here is a JSBin.

这篇关于不知道如何点击股利之外时，隐藏的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！