Angular UI Bootstrap — Отзывчивая панель навигации — Скрытие при изменении состояния/просмотра

Я использую Angular UI Bootstrap # 0.12.1 и UI router # 0.2.15 в своем приложении.

У меня есть отзывчивая панель навигации, которая работает нормально. Проблема в мобильном представлении. Когда я нажимаю на любое меню/ссылку, состояние/представление меняется. Но навигационная панель, кажется, остается там.

Я хочу, чтобы это спряталось. Будет здорово, если он появится в виде раскрывающегося списка.

Я создал образец Plunkr

Ниже моя навигационная панель

<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>

Я попытался вызвать функцию collapMenu() при любом щелчке меню, и у меня есть следующий код в контроллере

$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)

Как это решить? Есть ли лучший способ сделать навигационную панель раскрывающимся списком в мобильном представлении?

Спасибо.


angularjs angular-bootstrap
person iCode    schedule 16.09.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам не нужно вызывать .click() явно. Просто измените переменную, которая управляет состоянием меню:

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

Рабочая вилка на plunkr

person Episodex    schedule 16.09.2015
comment
Спасибо, это работает. Но ссылка plunkr не работает, потому что в ней нет строки $scope.navCollapsed = true;. :) - person iCode; 16.09.2015