Vous ne savez pas comment masquer un div en cliquant en DEHORS de la div

C'est une question de suivi à cette question: AngularJS d'entrée, avec l'accent tue ng-repeat filtre de liste

Fondamentalement, mon code est en utilisant AngularJS de sortir un div (un tiroir) sur la droite pour filtrer une liste de choses. La plupart du temps ce est utilisé l'INTERFACE utilisateur est bloqué donc un clic sur que le blocage de la div ferme le tiroir. Mais dans certains cas, nous n'avons pas bloquer l'INTERFACE utilisateur et de permettre à l'utilisateur de cliquer en dehors de tiroir pour annuler la recherche ou sélectionnez autre chose sur la page.

Ma première pensée a été de fixer une fenêtre.onclick gestionnaire lorsque le tiroir s'ouvre et si quelque chose n'est cliqué autre que le tiroir il faut fermer le tiroir. C'est la façon dont je le ferais dans une application JavaScript pure. Mais dans Angulaire, il est un peu plus difficile.

Ici est un jsfiddle auprès d'un échantillon que je me suis basé sur @Yoshi jsBin exemple: http://jsfiddle.net/tpeiffer/kDmn8/

Pertinentes morceau de code à partir de cet échantillon ci-dessous. Fondamentalement, si l'utilisateur clique en dehors du tiroir, j'invoque $champ d'application.toggleSearch de sorte que $champ d'application.open dos à faux.

Le code fonctionne, et même si le $scope.ouvert en va de true à false, il ne modifie pas les DOM. Je suis sûr que cela a quelque chose à voir avec le cycle de vie des événements ou peut-être lorsque je modifie $scope (puisque c'est à partir d'un événement distinct) que c'est une copie et non l'original...

Le but ultime sera d'une directive pour l'ultime possibilité de réutilisation. Si quelqu'un peut me pointer dans la bonne direction pour le faire, je vous serais reconnaissant.

$scope.toggleSearch = function () {

    $scope.open = !$scope.open;

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

et

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

}
InformationsquelleAutor Thad Peiffer | 2013-07-17