I have dropdown menu on navigation bar shown only for mobile devices. When dropdown menu link is clicked, it just move to another path. As you know, this action will not refresh entire page. But even after i click menu under dropdown, it does not go away.
I want to close the dropdown if the menu link is clicked or when route is changed. How do i do it in angularjs bootstrap?
If you are updating the route on clicking any option of the bootstrap dropdown menu then you can just watch for route change event:
Suppose you have below link which opens up a tooltip.
<a class="dropdown-toggle">
Click me for a dropdown, yo!
</a>
<ul class="dropdown-menu">
<li ng-repeat="choice in items" class="ng-scope">
<a class="ng-binding">The first choice!</a>
</li><li ng-repeat="choice in items" class="ng-scope">
<a class="ng-binding">And another choice for you.</a>
</li><li ng-repeat="choice in items" class="ng-scope">
<a class="ng-binding">but wait! A third!</a>
</li>
</ul>
$scope.$on('$routeUpdate', function(scope, next, current) {
$('html').trigger('click');
});
The above will work but there is absolutely no need to grab html element on every route change (as it causes reflow) so better to put it in directive as follows:
<html hide-dropdown>
angular.module('App', []).
directive('hideDropdown', function() {
return {
restrict: 'A',
link: function(scope, element) {
scope.$on('$routeUpdate', function(scope, next, current) {
element.trigger('click');
});
}
}
});
I found this work-around useful to close the menu.
$scope.$broadcast '$locationChangeSuccess'
I just had this issue too, it seems that we can use the dropdown-toggle directive.
This is no more working, but with angular v1.2.26 angular-ui-bootstrap 0.11.2 Bootstrap v3.2.0 the initial issue seems to be fixed, the drop down menu is closed even if the page is not refreshed.
