Wie öffnet man das Bootstrap-Dropdown-Menü beim Laden der Seite mit ONLY AngularJS? (Absolut keine jQuery)

Question

AngularJS & Bootstrap Greenhorn hier mit einer Frage in Bezug auf bootstrap Dropdown-Menüs. Ich habe versucht, eine Seite zu ändern, auf der das Dropdown-Menü beim Laden der Seite automatisch geöffnet wird (wie von unserem Kunden angefordert). Ich fand this question genau das, was ich erreichen möchte, aber die akzeptierte Lösung verwendet jQuery, und wir sind absolut verboten, jQuery zu verwenden. :(

Wenn ich die Seite mit Firefox & IE getestet, bemerkte ich, dass der div unter dem < - Single Button -> Kommentar wird:

<div class="btn-group dropdown ng-animate open" is-open="status.isopen" uib-dropdown="" data-ng-animate="2"> 

... so versucht, indem ich die " Öffnen Sie "Klasse mit ng-Klasse und einige bedingte Ausdrücke (basierend auf this link), aber es hat nicht funktioniert.

Gibt es eine Problemumgehung für diese, die AngularJS oder CSS verwendet? Ich habe versucht, dies für eine lange zu lösen Zeit jetzt, ohne viel Erfolg

Vielen Dank im Voraus.

---

-Code-Schnipsel:

<div class="col-xs-12 col-xs-12 c col-sm-4 col-md-3 col-lg-3 headerDivision" ng-controller="ctrlDropdown"> 
    <ul class="nav navbar-nav headerNavStyle"> 
     <li class="menu-item" style="margin-top:15px"> 
      <!-- Single button --> 
      <div class="btn-group" uib-dropdown is-open="status.isopen"> 

      <!-- Hamburger menu --> 
      <img uib-dropdown-toggle ng-disabled="disabled" ng-click="isMainMenu=true; isSubMenu=resetMenu(); getLinks(); bStopPropagation=true;" src="burger.png"> 

      <!-- Main menu --> 
      <ul uib-dropdown-menu role="menu" aria-labelledby="single-button" ng-click="bStopPropagation && $event.stopPropagation()"> 

      <!-- Main Menu --> 
      <li role="menuitem" class="main-menu-item" ng-repeat="link in links" ng-click="whatMenu(link.name); isSubMenu=false;" ng-show="isMainMenu"> 
      <img id="{{link.icon}}">{{link.name}}<img class="navi-expand-icon"> 
      </li> 
      <!-- End Main Menu --> 

Answer 1

Nach weiteren Recherchen und Fragen, bekam ich endlich th arbeitet mit dem $ timeout-Dienst und nutzt das Verhalten des Dropdown-Menüs, wenn es durch programmgesteuertes Auslösen eines Klickereignisses angeklickt wird.

1. HTML> hinzugefügt ng-init = "displayMainMenu()" und id = "nav-Burger" im img-Tag:

   <li class="menu-item" style="margin-top:15px"> 
   
        <!-- Single button --> 
        <div class="btn-group open" uib-dropdown is-open="status.isopen"> 
   
        <!-- Hamburger menu --> 
   
        <img ng-init="displayMainMenu()"id="nav-burger" uib-dropdown-toggle ng-disabled="disabled" ng-click="sMainMenu=true; isSubMenu=resetMenu(); getLinks(); bStopPropagation=true;" src="burger.png"> 
   
        <!-- Main menu --> 
   

2. AngularJS> deklarierten $ timeout in der Steuerung und Funktion hinzugefügt displayMainMenu():

   app.controller('ctrlDropdown', function ($scope, $timeout) { 
       // variables and functions here 
   
       //... 
   
       $scope.displayMainMenu = function() { 
        var domElement = document.getElementById('nav-burger'); 
   
        //alert('before timeout'); 
   
        $timeout(function() { 
         angular.element(domElement).triggerHandler('click'); 
        }, 0); 
   
        //alert('after timeout'); 
   
        //alert(domElement); 
       } 
   } 
   

Ich hoffe meine Lösung hilft jemand anderem in der Zukunft.

Vielen Dank an alle, die geantwortet haben!

Answer 2

Sie das Beispiel für Winkel js Dropdown hier bei Applying Angular Bootstrap Drop Down Example oder http://angularjs4u.com/demos/angularjs-bootstrap-ui-drop-demo/

Answer 3

Sie Seite laden können, ohne anwenden jquery wie diese

function func1() { 
    // your custom functions 
} 
window.onload=func1; 

auch gefunden könnten versuchen,