AngularJs - 通过以编程方式触发“点击”事件（无 jQuery）在页面加载时打开引导下拉菜单答案

【问题标题】：AngularJs - Opening a Bootstrap dropdown menu on page load by programmatically triggering the "click" event (NO jQuery)AngularJs - 通过以编程方式触发“点击”事件（无 jQuery）在页面加载时打开引导下拉菜单
【发布时间】：2016-04-06 09:27:14
【问题描述】：

请问是否可以使用 AngularJS 在页面加载时以编程方式触发下拉菜单的点击事件？

我希望在加载页面后，我的导航菜单会自动显示。

这是我目前所拥有的：

<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="img/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 -->

        </ul>

     </div>
</li>

这是我的 Angular JS 代码：

$scope.displayMainMenu = function () {
    var domElement = document.getElementById('nav-burger');

    alert('before timeout');   // <-- This gets triggered

    $timeout(function () {
        angular.element(domElement).triggerHandler('click');
    }, 0);

    alert('after timeout');    // <-- This doesn't get triggered...
}

我感觉我真的很接近了，但是我不知道为什么它不起作用。

提前感谢您的回复。

【问题讨论】：

是否声明了 $timeout 并且您是否将其包含在您的项目中？您是否收到任何控制台错误？
1.不，我没有……我只是从 SO 中的另一个问题中得到的。理想情况下我应该在哪里声明 $timeout？ 2.“TypeError：对象不支持属性或方法‘完成’”。我不知道这是什么意思...

标签： angularjs

【解决方案1】：

对您的图片进行 ng-click 会触发此操作：ng-click="sMainMenu=true;" 但是，为了显示您使用的列表项 isMainMenu ng-show="isMainMenu"

所以我猜你打错了。

【讨论】：

不，这不是错字。其背后的原因是菜单应该显示的方式。一旦用户点击主菜单中的一个项目，就会出现一个子菜单，并将与主菜单区域重叠，而不是其默认行为（出现在右侧）。我们需要 isMainMenu 来确定当前显示的是哪一个菜单。我希望这是有道理的...... :)

【解决方案2】：

感谢您提供线索 Matheno！我对 $timeout 进行了更多研究，最后通过在控制器中声明 $timeout 使其工作：

app.controller('ctrlDropdown', function ($scope, $timeout) {

    $scope.isMainMenu = true;
    $scope.isSubMenu = false;
    $scope.links = "";
    $scope.subLinks = "";
    $scope.selectedLink = "";
    $scope.bStopPropagation = true;

   ...
}

【讨论】：

很高兴我能帮上忙。