I want my bootstrap and angular app menu to collapse with animation after selection, and then let the handler do navigation. (I'm mystified why a menu wouldn't close by default on selection).
I've found how to do jquery stuff in an angular app, and how to do menu stuff in a jquery app, so I'm trying to combine the solutions to these two questions:
- (menu, but not angular) Hide Twitter Bootstrap nav collapse on click
- (anugular, but not menu) How to trigger ng-click [AngularJS] programmatically
My html looks like this...
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/" ng-bind="title"></a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li ng-repeat="menuItem in menuItems" ng-click="selected(menuItem)"><p ng-bind="menuItem.name"></p></li>
</ul>
</div>
And so, I think my JS should look like this...
$scope.selected = function(menuItem) {
console.log(menuItem);
$timeout(function() {
angular.element('#js-navbar-collapse').triggerHandler('click');
}, 10);
};
But after trying every selector and several jquery methods, I can't make it work. The result is the same each time: the menu stays open, and all I get on the UI is a little flash of the menu icon.
