Адаптивное навигационное меню AngularJS скрывает контент в ng-view

Вот мой основной вид в index.html:

<body>
    <div id = "container">
        <header ng-controller = "NavController" >
            <nav id = "topNavBar" class = "topNav" ng-class = "{'responsive' : toggle}">
                <a href = "#/" ng-click = "toggle = false" ng-class = "{active: isActive('')}">Home</a>
                <a href = "#/about" ng-click = "toggle = false" ng-class = "{active: isActive('about')}">About</a>
                <a href = "#/gallery" ng-click = "toggle = false" ng-class = "{active: isActive('gallery')}">Gallery</a>
                <a href = "#/contact" ng-click = "toggle = false" ng-class = "{active: isActive('contact')}">Contact</a>
                <a href = "#" id = "menuIcon" ng-click = "toggle = !toggle">
                    <i class = "fa fa-bars"></i>
                </a>
            </nav>
        </header>
        <div ng-view></div>
    </div>
    <script src = "js/app.js"></script>
</body>

Вот мой CSS для меню навигации:

.topNav {
  overflow: hidden;
  background-color: #333;
}

.topNav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topNav a:hover {
  background-color: #ddd;
  color: black;
}

.topNav a.active {
  background-color: #4CAF50;
  color: white;
}

.topNav #menuIcon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topNav a:not(:first-child) {display: none;}
  .topNav a#menuIcon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topNav.responsive {position: relative;}
  .topNav.responsive #menuIcon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topNav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

А вот и app.js:

var app = angular.module('myApp', ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider

  .when('/', {
    templateUrl : 'pages/home.html',
    controller  : 'HomeController'
  })

  .when('/about', {
    templateUrl : 'pages/about.html',
    controller  : 'AboutController'
  })

  .when('/gallery', {
    templateUrl : 'pages/gallery.html',
    controller  : 'GalleryController'
  })

  .when('/contact', {
    templateUrl : 'pages/contact.html',
    controller  : 'ContactController'
  })

  .otherwise({redirectTo: '/'});
});

app.controller('NavController', function($scope, $location) { 
    $scope.isActive = function(page) {
        return $location.path().substring(1) == page;
    }

    $scope.toggle = false;
});

app.controller('HomeController', function($scope, $http) {
    // Code for HomeController
});

app.controller('AboutController', function($scope) {
  // Code for AboutController
});

app.controller('GalleryController', function($scope, $http) {
    // Code for GalleryController
});

app.controller('ContactController', function($scope) {
    // Code for ContactController
});

Когда размер экрана меньше 600 пикселей, мое меню навигации сворачивается и отображает кнопку меню. У меня был рабочий jQuery, который запускал раскрывающееся меню при нажатии кнопки меню:

$("#menuIcon").on('click', function() {
    $("#topNavBar").toggleClass('responsive');
});

Моя версия Angular ведет себя следующим образом:

Когда вы нажимаете кнопку меню, появляется раскрывающееся меню (хорошо), но все содержимое в ng-view исчезает (плохо)
Когда вы нажимаете кнопку меню второй раз, раскрывающееся меню сворачивается (хорошо)
Когда вы выполняете №1, а затем щелкаете ссылку в меню, соответствующая страница загружается правильно, а раскрывающееся меню сворачивается (хорошо)

Как это исправить?

ОБНОВЛЕНИЕ: решено

Перешел с AngularJS 1.4 на последнюю версию 1.7.5 (не уверен, почему я использовал 1.4 ....)
Обновлены навигационные ссылки: href = "#! / ..." вместо href = "# / ..."
Удален href = "#" из кнопки раскрывающегося меню (вероятно, это была основная причина моей проблемы)

angularjs

31.10.2018 19:44

Знаете ли вы, что директивы являются одной из самых мощных и универсальных функций Angular?

Директивы позволяют расширять HTML новыми элементами и атрибутами и даже создавать собственные структурные директивы для манипулирования DOM. С...

Разница между Angular и React

React и AngularJS - это два самых популярных фреймворка для веб-разработки. Оба фреймворка имеют свои уникальные особенности и преимущества, которые...

271

Ответы 1

У меня была такая же проблема, и это помогло мне ее исправить!

Я скопировал свою разметку из https://github.com/googlearchive/angularfire-seed/blob/master/app/index.html, а раскрывающееся меню панели навигации скопировано из примера начальной загрузки, который я где-то нашел:

    <div class = "collapse navbar-collapse">
      <ul class = "nav navbar-nav navbar-right">
        <li class = "dropdown" ng-show = "isLoggedIn">
          <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
            {{ user.name }}<b class = "caret"></b>
          </a>
          <ul class = "dropdown-menu">
            <li><a href = "" ng-click = "changePassword()">Change Password</a></li>
            <li><a href = "" ng-click = "logout()">Logout</a></li>
          </ul>
        </li>
      </ul>
      ...
    </div>

Проблема в том, что когда пользователь щелкает раскрывающийся список, он регистрируется как щелчок по элементу <a> и меняет URL-адрес на /#, что изменяет содержимое, отображаемое в основном блоке содержимого.

Удаление href = "#" из <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"> устранило для меня проблему, поэтому теперь URL-адрес не меняется (и, таким образом, основное содержимое не исчезает из блока <div ng-view>), когда пользователь щелкает раскрывающийся список!

      <a class = "dropdown-toggle" data-toggle = "dropdown">

16.03.2019 21:09

Другие вопросы по теме

Можно ли использовать Angular JS для архитектуры JAMstack?

Добавить элементы под строкой <td>

Ng-hide и показать в ng-repeat

Пагинация не работает на страницах в Angular JS

Отправить массив объекта в JSON в angular

Первоначально показать заполнитель на md-datepicker

Директива атрибута не работает для загруженного элемента ajax?

Маршрут AngualrJS не работает при обновлении значения параметра непосредственно в URL-адресе

Как получить значение в AngularJS или JavaScript из <option>

Почему моя переменная AngularJS передается как буквальный код?

Адаптивное навигационное меню AngularJS скрывает контент в ng-view

Ответы 1

Другие вопросы по теме

Похожие вопросы