Dropdown-Toggle mit AngularJS, der Schließt, Klicken Sie irgendwo auf
Implementierung einer einfachen dropdown-Richtlinie verwendet, ng-show ein-oder ausblenden ein Menü ist trivial in AngularJS. Ich möchte auch das Menü schließen, wenn der Benutzer klickt an anderer Stelle in den Bildschirm nach öffnen des Menüs. Was ist die einfachste mögliche richtige Weg, dies zu tun? Ich habe versucht mit $document.binden und $document.die Bindung zu Bindung, die aus dem Dokument hinterher, aber es scheint nicht zu funktionieren, wie erwartet, und ich kann nicht arbeiten dürften, wie es sollte wegen zu arbeiten, um die Fragen der Festlegung des lösungsumfangs.
Ich bin mir bewusst, dass die ui-bootstrap hat eine ähnliche Richtlinie (dropdownToggle), und ich habe gegraben durch die Quelle, aber es sieht viel komplizierter und führt in eine Abhängigkeit von einer älteren version von bootstrap.
Hier ist ein Beispiel plunker (nicht schließen Sie das Menü, klicken Sie auf an anderer Stelle).
Code:
<!DOCTYPE html>
<html ng-app="plunker" >
<head>
<link data-require="[email protected]" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="example.js"></script>
<link href="///netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div ng-app="dropdown">
<div menu-status-widget></div>
</div>
</body>
</html>
- scheint ein problem zu sein das hinzufügen eines Dokuments klicken Sie oben handler innerhalb von ng-click. Verwenden Sie eigene Klick-Prozedur. kann eine angular-ui-dropdown-code als Referenz
- das Dokument, klicken Sie auf " handler funktioniert, Wenn ich die Tropfen eine Warnung in es, ich bekomme eine Warnung wenn ich auf anderswo.
- was ich erlebt habe, war das Dokument, klicken Sie oben handler scheint, um Feuer-sobald Sie binden es innerhalb
ng-click
. Bei der Verwendung von externen Veranstaltungen, der Winkel ist nicht bewusst, dass der Umfang zu ändern, müssen Sie den Bereich ändern, in$.apply
auslöst verdauen . Sobald Sie dies tun, indem Sie die'ng-clcik
Ansatz, das Menü, öffnen Sie niemals...die 2 heben sich gegenseitig auf - deshalb schlage ich vor, folgende Muster der angular-ui-Leute benutzen, und vermeiden Sie
ng-click
,
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hier ist, wie zu handle die situation mit
ng-click
. Sie brauchen, um passieren$event
argument in Ihremng-click
Funktion so nennen kann$event.stopPropagation()
ng-click
scheint nicht zu reagieren in der gleichen Weise ein jQuery-handler würde. Es scheint tatsächlich das Ereignis auszulösen, nachdem der gesamte code, der ausgeführt wird, sodass dadurch die$document
handler, den Sie gerade Hinzugefügt haben, um tatsächlich Feuer.In meinem Kopf ist es einfacher zu vergessen
ng-click
und verwenden nurelement.bind
. So oder so werden Sie noch verwenden Siescope.$apply()
auf Bereich ändern, so eckig verläuft ein digestDEMO
ng-clcik
...vergessen Sie nicht passieren konnten$event
esKönnen Sie schmücken Richtlinien.
Mit diesem Weg haben Sie nicht berühren Sie den original-code, und Sie können das ursprüngliche Verhalten.
Kann man einen schließen button in der dropdown -
HTML
JS