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,
InformationsquelleAutor Case | 2013-11-08
Schreibe einen Kommentar