AngularJS с UI Bootstrap - автоматическое свертывание меню при нажатии на элемент навигации - PullRequest
Новая
       25

AngularJS с UI Bootstrap - автоматическое свертывание меню при нажатии на элемент навигации

0 голосов
/ 10 мая 2019

В этом примере: https://plnkr.co/edit/O9fbLcTV7QPvqB3FpiAA?p=preview

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

Я пытался: 

<li><a href="#" ng-click="isNavCollapsed = !isNavCollapsed;">Link 1</a></li>

, который работает, но вызывает анимацию свертывания навигационного меню, когда не в мобильном режиме (на более широком экране).

Ответы [ 2 ]

0 голосов
/ 10 мая 2019

Я решил это, добавив флаг 'hamburger_open', который вызывает true при расширении () и false при свертывании (). 

<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed" expanding="hamburger_open=true" collapsing="hamburger_open=false">

... и функцию hamburger_collapse, которая проверяет, является ли hamburger_open истинным: 

<li><a href="#" ng-click="hamburger_collapse()">Link 1</a></li>

  ...
  $scope.hamburger_collapse = function() {
    if($scope.hamburger_open) {
      $scope.isNavCollapsed = !$scope.isNavCollapsed;
    }
  }
  ...

https://plnkr.co/edit/IFIL8lgjK0oGDqZkLK5F?p=preview

Кажется странным, что нужно учитывать, что каждое современное мобильное меню автоматически сворачивается при выборе пункта меню.

0 голосов
/ 10 мая 2019

Вы можете добавить прослушиватель событий, используя обычный JS, где вы можете проверить, что ширина окна соответствует вашей мобильной точке останова.Просто убедитесь, что вы включили фактическое изменение в переменную области действия в функции $apply, иначе AngularJS не узнает об этом:

https://plnkr.co/edit/ZzbXZ3lFxqX6Tlra46W5?p=preview

angular.module('ui.bootstrap.demo').controller('CollapseDemoCtrl', function ($scope) {
  $scope.isNavCollapsed = true;
  $scope.isCollapsed = false;
  $scope.isCollapsedHorizontal = false;


  document.addEventListener('click', collapseMenu, false);

  function collapseMenu(event) {
    if(event.target.matches('.nav.navbar-nav li a')  && window.innerWidth < 768) {
      $scope.$apply(function() {
        $scope.isNavCollapsed = true;
      });
    }
  }

  // prevent memory leaks by removing listener when scope is destroyed
  $scope.$on("$destroy", function() {
    document.removeEventListener('click', collapseMenu, false);
  });

});

Обратите внимание, что это потребует от васчтобы синхронизировать CSS и JS со значением точки останова

...