Вот мой основной вид в 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 = "#" из кнопки выпадающего меню (вероятно, это была основная причина моей проблемы)