Question

我在我的应用程序中使用Angular UI Bootstrap＃0.12.1和UI路由器＃0.2.15。

我有一个响应式导航栏，工作正常。问题出在移动视图中当我点击任何菜单/链接时，状态/视图会发生变化。但导航栏似乎留在那里。

我希望它隐藏起来。它会很棒，如果它是下拉。

以下是我的导航栏

<nav class="navbar navbar-default" role="navigation" ng-controller="MenuCtrl">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">

      <button id="btn-menu-toggle" type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'">

      <ul class="nav navbar-nav">
        <li ng-class="{'active':$state.includes('home')}" ng-click="collapseMenu()"><a ui-sref="home.main1">Home</a></li>
        <li ui-sref-active="active" ng-click="collapseMenu()"><a ui-sref="dashboard.dash1">Dashboard</a></li>
        <li ui-sref-active="active" ng-click="collapseMenu()"><a ui-sref="report">Reports</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </nav>

我尝试在任何菜单点击上调用collapseMenu（）函数，我在控制器中有以下代码

$scope.collapseMenu = function() {
        if ($(window).width() <= 768) {
            console.log('hiding');
            $('#btn-menu-toggle').click();
        }
    }

但我收到错误

Error: [$rootScope:inprog] $apply already in progress
http://errors.angularjs.org/1.4.2/$rootScope/inprog?p0=%24apply
    at REGEX_STRING_REGEXP (angular.js:68)
    at beginPhase (angular.js:16202)
    at Scope.parent.$get.Scope.$apply (angular.js:15946)
    at HTMLButtonElement.<anonymous> (angular.js:23305)
    at HTMLButtonElement.eventHandler (angular.js:3273)
    at Object.n.event.trigger (jquery-2.1.4.min.js:3)
    at HTMLButtonElement.<anonymous> (jquery-2.1.4.min.js:3)
    at Function.n.extend.each (jquery-2.1.4.min.js:2)
    at n.fn.n.each (jquery-2.1.4.min.js:2)
    at n.fn.extend.trigger (jquery-2.1.4.min.js:3)

如何解决？有没有更好的方法可以将导航栏作为移动视图中的下拉列表？

感谢。

Answer 1

您无需明确调用.click()。只需更改控制菜单状态的变量：

$scope.collapseMenu = function() {
    if ($(window).width() <= 768) {
        console.log('hiding');
        $scope.navCollapsed = true;
    }
}

Working fork on plunkr

Angular UI Bootstrap - 响应式Navbar - 隐藏状态/视图更改

1 个答案: