Свернуть событие, используя Bootstrap и AngularJS - Navbar

Question

Свернуть событие, используя Bootstrap и AngularJS - Navbar

2

Поэтому я посмотрел, хотя некоторые из вопросов уже задавались об этой проблеме и не смогли найти решение, которое работает для меня.

Я использую Bootstrap (v 3.3.5), чтобы создать навигационное меню в верхней части моего сайта. Я также использую AngularJS (v 1.4.4) и Angular-UI-Bootstrap (v 0.13.3). Когда меню рушится и отображается, вам нужно переключить кнопку меню, чтобы она закрылась. нажатие ссылок меню или вне меню не влияет.

Поэтому я попробовал несколько решений, которые обсуждались в Stackoverflow, но ни один из них не работал для меня. После нескольких часов вытягивания волос у меня появился вариант закрытия меню, когда маршрут изменился (маршрут AngularJS $), но мой код, похоже, не делает этого трюка. Я хотел бы получить совет.

(function (Directives, undefined)
{
	app.Modules.app.directive("collaspeListener", [ function () /* AngularJS Directive */
	{
		return	{
			restrict: 'A',
			link: function(scope, element, attr) {
				$('#navcollaspe').on(shown.bs.collapse, function () { /*Bootstrap collapse JS */
					console.log("shown");
					$rootScope.$on('$routeChangeSuccess', function() { /*AngularJS $route */

						$('#navcollaspe').collapse('hide') /* Bootstrap collapse JS */
					})
				})
			}
		}
	}]);
}(app.Directives = app.Directives || {} ));

<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container" collapse-listener="">
		<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed visible-xs-block" data-toggle="collapse" data-target="#navcollapse"  aria-expanded="false">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<div class="navbar-brand"><a href="#/"><img src="assets/images/logos/logo.png" class="img-responsive" alt="Logo"></img></a></div>
				<div class="navbar-text navbar-left hidden-xs"><a href="#/">Main Title</a></div>
				<div class="navbar-text navbar-left visible-xs-block "><a href="#/">Short Title</a></div>
				<div class="outside-nav">
					<ul class="nav navbar-nav navbar-right visible-sm-block dropdown-menu-left">
	    		<li ><a href="#/"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a></li>
	   			<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span><b class="caret"></b></a>
					<ul class="dropdown-menu">
	   					<li><a href="#/systems">...</a></li>
	    				<li><a href="#/systems">...</a></li>
	    				<li><a href="#/systems">...</a></li>
	   					<li><a href="#/systems">...</a></li>
	   					<li><a href="#/systems">....</a></li>
	   					<li><a href="#/systems">...</a></li>
						<li><a href="#/systems">...</a></li>
						<li><a href="#/systems">...</a></li>
					</ul>
				</li>
				<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span><b class="caret"></b></a>
					<ul class="dropdown-menu">
						<li class="dropdown-header">Applications</li>
	   					<li><a href="#/applicationsPage">...</a></li>
					</ul>
				</li>
	    		<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span><b class="caret"></b></a>
					<ul class="dropdown-menu">
						<li class="dropdown-header">Company</li>
	   					<li><a href="#/company"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About US</a></li>
	    				<li><a href="#/company"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Company Blogs</a></li>
	   					<li><a href="#/company"><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> Contact Us</a></li>
					</ul>
				</li>
	    		<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">
	 				<span class="glyphicon glyphicon-user" aria-hidden="true"></span><b class="caret"></b></a>
					<ul class="dropdown-menu">
						<li class="dropdown-header">My Account</li>
						<li><a href="#/"><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> Profile</a></li>
						<li><a href="#/"><span class="glyphicon glyphicon-inbox" aria-hidden="true"></span> Messages <span class="badge">{{ user.newMessagesCount }}</span></a></li>
	   					<li><a href="#/"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Settings</a></li>
	   					<li class="divider"></li>
	   					<li><a href="#/"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Sign Out</a></li>
					</ul>
				</li>
				<li><a href="#/"><span class="glyphicon glyphicon-inbox" aria-hidden="true"></span></a></li>
			</ul>
				</div><!-- End outside-nav -->
		</div><!-- End navbar-header -->
		<div class="collapse navbar-collapse" id="navcollapse">
			<ul class="nav navbar-nav navbar-right">
	    		<li class="active"><a href="#/"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a></li>
	   			<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> Systems<b class="caret"></b></a>
					<ul class="dropdown-menu">
	   					<li><a href="#/systems" data-toggle="collapse" data-target="#navcollapse">...</a></li>
	    				<li><a href="#/systems">...</a></li>
	    				<li><a href="#/systems">...</a></li>
	   					<li><a href="#/systems">...</a></li>
	   					<li><a href="#/systems">...</a></li>
	   					<li><a href="#/systems">...</a></li>
						<li><a href="#/systems">....</a></li>
						<li><a href="#/systems">...</a></li>
					</ul>
				</li>
				<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> Applications<b class="caret"></b></a>
					<ul class="dropdown-menu">
	   					<li><a href="#/applicationsPage">...</a></li>
					</ul>
				</li>
	    		<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span> Company<b class="caret"></b></a>
					<ul class="dropdown-menu">
	   					<li><a href="#/company"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About US</a></li>
	    				<li><a href="#/company"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Company Blogs</a></li>
	   					<li><a href="#/company"><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> Contact Us</a></li>
					</ul>
				</li>
	    		<li class="dropdown"><a class="dropdown-toggle"  data-toggle="dropdown">
	 				<span class="glyphicon glyphicon-user" aria-hidden="true"></span> My Account <span class="badge">{{ user.newMessagesCount }}</span><b class="caret"></b></a>
					<ul class="dropdown-menu">
						<li><a href="#/"><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> Profile</a></li>
						<li><a href="#/"><span class="glyphicon glyphicon-inbox" aria-hidden="true"></span> Messages <span class="badge">{{ user.newMessagesCount }}</span></a></li>
	   					<li><a href="#/"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Settings</a></li>
	   					<li class="divider"></li>
	   					<li><a href="#/"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Sign Out</a></li>
					</ul>
				</li>
			</ul>
		</div><!-- End navbar-collapse -->
	</div><!-- End Navbar Container -->
</nav><!-- End Top Navbar -->

Shane E. Bryan 25 авг. 2015, в 19:51

Источник

1

Есть ли console.log("shown"); когда-нибудь казнили? Кроме того, вы, кажется, нигде не $rootScope .
Hinrich 25 авг. 2015, в 17:21
0

Нет, это не выполняется. Где я должен был бы ввести это в? Я новичок в JS. :)
Shane E. Bryan 25 авг. 2015, в 17:55

Теги:

javascript

twitter-bootstrap

angularjs

angular-ui-bootstrap

angularjs-routing

1 ответ

Ещё вопросы

Есть ли console.log("shown"); когда-нибудь казнили? Кроме того, вы, кажется, нигде не $rootScope .
Нет, это не выполняется. Где я должен был бы ввести это в? Я новичок в JS. :)

Shane E. Bryan · Accepted Answer · 2015-08-26T18-20-00.000Z

Поэтому, просмотрев код и сделав еще несколько исследований, я смог найти способ свернуть меню всякий раз, когда была нажата ссылка внутри него.

Я нашел пару мест, где я пропустил что-то прописанное, которое после исправления получило код для выполнения console.log('shown') но больше ничего. Поэтому я нашел отличный учебник о том, как правильно использовать AngularJS и Bootstrap вместе с помощью Angular-UI. Учебное пособие - Крис Севилья.

Поэтому, после настройки моего кода для выполнения рекомендаций Angular-UI, он работает так, как ожидалось. Я также ввел $rootScope основываясь на рекоммендации от Hinrich в комментариях выше. Я включил новый код в надежде, что он спасет кого-то еще некоторое время и разочарование. :)

(function (Controllers, undefined)
{
	app.Modules.app.controller("navController", ['$scope', function ($scope)
	{
		$scope.isCollapsed = true;
	}]);

}(app.Controllers = app.Controllers || {} ));

(function (Directives, undefined)
{app.Modules.app.directive("collapseListener", ['$rootScope', function ($rootScope)
	{
		return	{
			restrict: 'A',
			controller: 'navController',
			link: function(scope, element, attr) {
				$rootScope.$on('$routeChangeSuccess', function(event, current, previous, rejection) {
					if (scope.isCollapsed == false) {
					scope.isCollapsed = true;
					}
				})
			}
		}
	}]);
}(app.Directives = app.Directives || {} ));

<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container" collapse-listener="">
		<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" ng-click="isCollapsed = !isCollapsed">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<div class="navbar-brand"><a href="#/"><img src="assets/images/logos/logo.png" class="img-responsive" alt="Logo"></img></a></div>
				<div class="navbar-text navbar-left"><a href="#/">Full Title</a></div>
		</div><!-- End navbar-header -->
		<div class="collapse navbar-collapse" collapse="isCollapsed">
			<ul class="nav navbar-nav navbar-right">
	    		<li class="active"><a href="#/"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a></li>
	   			<li dropdown=""><a dropdown-toggle=""><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> Systems<b class="caret"></b></a>
					<ul class="dropdown-menu">
	   					<li><a href="#/systems">...</a></li>
	    				<li><a href="#/systems">...</a></li>
	    				<li><a href="#/systems">...</a></li>
					</ul>
				</li>
			</ul>
		</div><!-- End navbar-collapse -->

	</div><!-- End Navbar Container -->
</nav><!-- End Top Navbar -->