如何仅使用 AngularJS 在页面加载时打开 bootstrap 下拉菜单？ （绝对没有jQuery）

Question

AngularJS & Bootstrap 新手在这里有一个关于 bootstrap 下拉菜单的问题。我一直在尝试修改下拉菜单在页面加载时自动打开的页面（根据我们客户的要求）。我发现 this question 与我想要实现的完全相同，但是公认的解决方案使用 jQuery，我们绝对禁止使用 jQuery。 :(

当我使用 Firefox 和 IE 测试该页面时，我注意到 <-- Single Button --> 评论下的 div 变为：

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

...所以我尝试使用 ng-class 和一些条件表达式（基于 this link）添加 "open" class 但它没有用.

是否有使用 AngularJS 或 CSS 的解决方法？我已经尝试解决这个问题很长时间了，但没有成功。

提前致谢。

---

代码片段：

<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

您可以尝试在 Applying Angular Bootstrap Drop Down Example or http://angularjs4u.com/demos/angularjs-bootstrap-ui-drop-demo/

处找到的 angular js 下拉列表示例

Answer 2

您可以在没有 jquery 的情况下应用页面加载，也像这样

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

Answer 3

经过更多研究和提出问题后，我终于通过使用 $timeout 服务并通过以编程方式触发点击事件来利用下拉菜单的行为来实现这一点。

1. HTML > 在 img 标签中添加了 ng-init="displayMainMenu()" 和 id="nav-burger":

       <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 > 在控制器中声明 $timeout 并添加函数 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);
       }
   }
   

我希望我的解决方案对以后的其他人有所帮助。

感谢大家的回复！