Question

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

当我使用Firefox＆amp ;;测试页面时IE，我注意到＆lt; - Single Button - ＆gt;下的div评论变为：

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

...所以我尝试添加＆＃34;打开＆＃34;使用ng-class和一些条件表达式的类（基于this link），但它没有用。

是否有使用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或http://angularjs4u.com/demos/angularjs-bootstrap-ui-drop-demo/

上的角度js下拉列表示例

Answer 2

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

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

Answer 3

经过更多的研究和提问之后，我终于通过利用$ timeout服务并利用下载菜单在通过编程触发点击事件点击时的行为来实现这一目标。

HTML＆gt;在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 -->

AngularJS＆gt;在控制器中声明了$ 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);
    }
}

我希望将来我的解决方案可以帮助其他人。

感谢所有回复的人！

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

3 个答案:

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

3 个答案:

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