CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Kageetai
Kageetai

Reputation: 1298

Collapse Navbar when route changes

I just added ui-bootstrap to my package based on the angular-fullstack-generator. Before that I used the following code to collapse the navbar on small devices when the route changes:

$rootScope.$on('$stateChangeSuccess', function (event, next) {
  // collapse navbar
  angular.element('.navbar-collapse').collapse('hide');
});

This is not possible anymore because of the directives as I understand from #1672 but how I can manually collapse the navbar then?

Thanks in advance, Michael

Upvotes: 1

Views: 1667

Answers (1)

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40296

You can collapse the navbar on click (it feels more natural to me) simply by adding (or enhancing) the ng-click handler on each <a>:

<a ng-href="{{item.link}}" ng-click="isCollapsed=true">{{item.title}}</a>
<a href="" ng-click="isCollapsed=true;changeLanguage('en')">{{ 'LANG_BUTTON_EN' | translate }}</a>

If you really want it after the $stateChangeSuccess event, add the same event listener to your navbar.controller.js (no need to listen to the $rootScope though - or is this event limited there? I do not know so please use caution):

angular.module('jayMapApp')
    .controller('NavbarCtrl', function ($scope, $location, $translate, Auth) {
        ...
        $scope.$on('$stateChangeSuccess', function (event, next) {
            $scope.isCollapsed = true;
        });
        ...

Upvotes: 1

Related Questions