Angularized Bootstrap Menu Only Collapsing Dropdown, not Entire Navbar after Link Click

Question

I have a Angularized bootstrap menu that fully collapses the entire navbar if it is loaded in a view, but not when in the index.html. When loaded into my index.html, it only collapses the dropdown and not the whole navbar when an item is clicked on.

I need it in the index.html before the views (data-ng-view) since I have content between the menu and views (AdSense). When placed before my views in the index.html page, if I click on a link, I am able to go that link... but the overall menu stays open instead of closing after going to a link. However, the dropdown will of "Categories" will collapse as intended, it is just the overall menu that won't.

I am using AngularUI and have injected 'ui.bootstrap' into the App (that is how it works when loaded in a view). The controllers for my views are tied to the page they relate to.

Example:

when('/home', { templateUrl: './views/home.html', controller: 'homeCtrl' }).

Here is my navigation:


    
        
        My Title
    

    
        
            Home
            
                Categories 
                
                    cat1
                    cat2
                    cat3
                    cat4
                    cat5
                    cat6
                
            
            Add Article Link

Here is the index.html (please note that the menu above is included via an ng-include. I have tried it without the ng-include but it still doesn't collapse):














{{pageTitle}}


















    
    
    
    
    
          
    
        © My Site 2015 | Terms and Conditions

Here is my App.js:

var pfcModule = angular.module('pfcModule', [
'ngRoute',
'ui.bootstrap',
'auth0',
'angular-storage',
'angular-jwt',
'angularUtils.directives.dirPagination',
'pfcServices',
'pfcAddArticle',
'pfcArticleID',
'pfcArticlesCategory',
'pfcArticlesCount',
'pfcArticleVoting',
'pfcHomeArticles',
'pfcLoginManagement',
'pfcModalDependency',
'pfcDirectives']);

pfcModule.config([
'$routeProvider',
'authProvider',
'$httpProvider',
'$locationProvider',
'jwtInterceptorProvider',
'paginationTemplateProvider',
function ($routeProvider, authProvider, $httpProvider, $locationProvider, jwtInterceptorProvider, paginationTemplateProvider) {
    $routeProvider.
        when('/home', { templateUrl: './views/home.html', controller: 'pfcHomeArticlesCtrl' }).
        when('/categories/:articlecategoryID/:articlecategoryName', { templateUrl: './views/categories.html', controller: 'pfcArticlesCategoryCtrl' }).
        when('/article/:articleTitle/:articleID', { templateUrl: './views/article.html', controller: 'pfcArticleIDCtrl' }).
        when('/add-article', { templateUrl: './views/add-article.html', controller: 'pfcArticlePostCtrl', requiresLogin: true }).
        when('/login', { templateUrl: './views/login.html', controller: 'loginPageCtrl' }).
        when('/termsandconditions', { templateUrl: './views/terms.html' }).
        otherwise({ redirectTo: '/home' });
    $httpProvider.defaults.headers.common['X-ZUMO-APPLICATION'] = '1111111111111111111';
    $httpProvider.defaults.headers.common['Content-Type'] = 'Application/json';
    authProvider.init({
        domain: 'aurl.com',
        clientID: '1111111111111111',
        callbackURL: location.href,
        loginUrl: '/login'
    });
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('!');

    jwtInterceptorProvider.tokenGetter = function (store) {
        return store.get('token');
    }

    $httpProvider.interceptors.push('jwtInterceptor');

    // Pagination provider
    paginationTemplateProvider.setPath('js/libs/dirPagination.tpl.html');


}])

.run(function ($rootScope, auth, store, jwtHelper, $location) {
$rootScope.$on('$locationChangeStart', function () {
    if (!auth.isAuthenticated) {
        var token = store.get('token');
        if (token) {
            if (!jwtHelper.isTokenExpired(token)) {
                auth.authenticate(store.get('profile'), token);
            } else {
                $location.path('/login');
            }
        }
    }

});
});

tpie · Accepted Answer

In order to cause the menu to collapse when you click one of the links you can toggle the value of isCollapsed with ng-click. The reason it was collapsing when inside a view was likely because it was actually reloading the navigation, not collapsing it.

Modify your navigation like this:


    Home
    
        Categories 
        
            cat1
            cat2
            cat3
            cat4
            cat5
            cat6
        
    
    Add Article Link

Plunker

Angularized Bootstrap Menu Only Collapsing Dropdown, not Entire Navbar after Link Click

Answers (1)

Related Questions