使用 Bootstrap 和 AngularJS 的折叠事件 - 导航栏答案

【问题标题】：Collapse Event using Bootstrap and AngularJS - Navbar使用 Bootstrap 和 AngularJS 的折叠事件 - 导航栏
【发布时间】：2015-08-25 17:13:38
【问题描述】：

因此，我查看了一些已针对此问题提出的问题，但未能找到适合我的解决方案。

我正在使用 Bootstrap (v 3.3.5) 在我的网站顶部创建一个导航栏菜单。我也在使用 AngularJS (v 1.4.4) 和 Angular-UI-Bootstrap (v 0.13.3)。当菜单折叠并显示时，您必须切换菜单按钮才能关闭它。单击菜单链接或菜单外没有任何效果。

所以我尝试了几种在 Stackoverflow 上讨论过的解决方案，但没有一个对我有用。经过几个小时的拉扯后，我想出了一个在路线更改时关闭菜单的选项（AngularJS $route），但我的代码似乎没有起到作用。我会喜欢一些建议。

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

【问题讨论】：

console.log("shown"); 会被处决吗？此外，您似乎没有在任何地方注入$rootScope。
不，它不会被执行。我需要在哪里注射？我是 JS 新手。 :)

标签： javascript angularjs twitter-bootstrap angular-ui-bootstrap angularjs-routing

【解决方案1】：

因此，在查看了代码并进行了更多研究之后，我能够找到一种方法来折叠菜单，只要单击其中的链接。

我发现了几个我错过拼写的地方，修复后得到了执行console.log('shown')的代码，但没有别的。所以我最终找到了一个关于如何使用 Angular-UI 正确使用 AngularJS 和 Bootstrap 的很棒的教程。教程由Chris Sevilleja.

因此，在调整我的代码以遵循 Angular-UI 建议后，它可以按预期工作。我还根据上面 cmets 中来自Hinrich 的推荐注入了$rootScope。我已经包含了新代码，希望它可以节省其他人一些时间和挫败感。 :)

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

【讨论】：