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();
}
}
Vous devez vous connecter pour publier un commentaire.
Le tiroir ne ferme pas parce que l'événement click se produit à l'extérieur de l'empreinte de cycle et Angulaire ne sait pas que $champ d'application.ouverte a changé. Pour corriger cela, vous pouvez appeler $scope.$appliquer() après le $scope.l'ouverture est définie sur false, ce qui va déclencher l'digérer cycle.
Ici est votre Violon.
J'ai essayé de créer une directive pour le tiroir recherche, si cela aide (il a besoin de quelques corrections :)). Voici une JSBin.
Je suggère d'ajouter $de l'événement.stopPropagation(); sur la vue tout de suite après sur le ng-click. Vous n'avez pas besoin d'utiliser jQuery.
Ensuite, vous pouvez utiliser cette simplifié js.
La accepté de répondre à provoquera une erreur si vous cliquez sur le bouton pour fermer le tiroir/popup, et le bouton est situé en dehors de cela, parce que
$apply()
sera exécuté deux fois.C'est une version simplifiée, qui n'a pas besoin d'appeler l'ensemble
toggleSearch()
fonction et empêche la double$apply()
.Je ne pouvais pas trouver une solution, j'ai été 100% satisfait, c'est ce que j'ai utilisé:
la durée avec ng-click est utilisé pour ouvrir le menu, la div.accountMenu est activée (ouverte ou fermée
Il utilise jQuery pour enfant de la vérification, mais vous pouvez probablement le faire sans si nécessaire.
J'ai été faire quelques méchants erreurs avec les autres peuples de la version, comme essayer d'appeler $apply() lors de son déjà dans un cycle, ma version empêche la propagation et de la sécurité-contrôles contre $apply()