Schließen dropdown-Menü klicken Sie in angular ui bootstrap

Habe ich dropdown-Menü auf die navigation-bar angezeigt, nur für mobile Geräte. Wenn die dropdown-Menü-link geklickt wird, bewegen Sie einfach auf einen anderen Pfad. Wie Sie wissen, diese Aktion wird nicht die gesamte Seite aktualisieren. Aber auch nachdem ich auf das dropdown-Menü unter, Sie gehen einfach nicht Weg.

Möchte ich schließen Sie das dropdown-wenn Sie die Menü-link angeklickt wird oder wenn die route geändert wird. Wie mache ich es in angularjs bootstrap?

InformationsquelleAutor Fizer Khan | 2014-01-04
  1. 2

    Wenn Sie die Aktualisierung der route-Klick auf eine beliebige option, die bootstrap-dropdown-Menü klicken, dann können Sie nur beobachten, für die route "change" - Ereignis:

    Angenommen, Sie haben folgenden link öffnet sich ein tooltip.

    <a class="dropdown-toggle">
  Click me for a dropdown, yo!
</a>

<ul class="dropdown-menu">
  <li ng-repeat="choice in items" class="ng-scope">
    <a class="ng-binding">The first choice!</a>
  </li><li ng-repeat="choice in items" class="ng-scope">
    <a class="ng-binding">And another choice for you.</a>
  </li><li ng-repeat="choice in items" class="ng-scope">
    <a class="ng-binding">but wait! A third!</a>
  </li>
</ul>

$scope.$on('$routeUpdate', function(scope, next, current) {
   $('html').trigger('click');
});

    Den oben genannten arbeiten, aber es gibt absolut keine Notwendigkeit zu packen html-element auf jeder route ändern (wie es bewirkt, dass der reflow -) also besser gesagt in der Richtlinie wie folgt:

    <html hide-dropdown>

angular.module('App', []).
  directive('hideDropdown', function() {
    return {
       restrict: 'A',
       link: function(scope, element) {
         scope.$on('$routeUpdate', function(scope, next, current) {
           element.trigger('click');
         });
       } 
    }
  });
    • Danke. Aber es blendet das dropdown-Menü, nach dem ersten Klick.
    • Ich sehe. In der Regel, wenn Sie klicken Sie auf eine Menüoption, wird automatisch das Menü wird geschlossen - ich Frage mich, warum die nicht in Ihrem Fall. Ich glaube nicht, dass es eine option, es zu verbergen, andere als die Auslösung der Klick auf die html-Knoten dynamisch wie in der Antwort aktualisiert.
    • In meinem Fall, route basiert auf der hash ändern.Selbst wenn der hash der url geändert, wird die dropdown-Menü Umschalten selbst? Ich verstehe die ganze Seite ändern, nur reset der dropdown-Liste.
    • Wo soll ich setzen, dass Javascript? In einem controller?
    • Ja, im controller mit Bezug das problem bereits hier, aber Sie besser dran, mit einer Richtlinie wie bereits in der Antwort aktualisiert.
    InformationsquelleAutor codef0rmer
  2. 1

    Fand ich dieses work-around nützlich, um das Menü zu schließen.

    $scope.$broadcast '$locationChangeSuccess'
    InformationsquelleAutor Casey Watson
  3. 0

    Ich nur hatte dieses Problem auch, es scheint, dass wir verwenden können, die dropdown-toggle Richtlinie.

    Ist dies nicht mehr funktioniert, aber mit
    Winkel-v1.2.26
    angular-ui-bootstrap-0.11.2
    Bootstrap v3.2.0
    das ursprüngliche Problem scheint behoben zu sein, die drop-down-Menü geschlossen ist, auch wenn die Seite nicht aktualisiert.

    • Scheint nicht zu funktionieren (Winkel-1.2.24, eckig, bootstrap 0.11, Bootstrap 3)
    • danke für den Hinweis, du hast Recht, es ist nicht mehr Arbeit
    InformationsquelleAutor Pierre
Schreibe einen Kommentar