Show hide menu in header template angularjs

Question

Trying to show hide menus based on user login using a custom directive. It all works fine in the views templates but in header it does not work [header is a different template]. It works fine on page refresh though.

header.html

<div id="header" class="navbar">
    <a class="navbar-brand" href="#">My APP</a>
    <ul class="nav nav-pills">
        <li has-logged="!in"><a href="#/register">Sign Up</a></li>
        <li has-logged="in"><a href="#/home">Home</a></li>
    </ul>
</div>

has-logged directive

angular.module('myApp')
    .directive('hasLogged', function(CookieService) {
        return {
            link: function(scope, element, attrs) {
                if(!_.isString(attrs.hasLogged))
                    throw "hasLogged value must be a string";

                var value = attrs.hasLogged.trim();
                var notLoggedFlag = value[0] === '!';
                if(notLoggedFlag) {
                    value = value.slice(1).trim();
                }

                function toggleVisibilityBasedOnLogin() {
                    var logged = CookieService.getLoginStatus();

                    if(logged && !notLoggedFlag || !logged && notLoggedFlag)
                        element.show();
                    else
                        element.hide();
                }
                toggleVisibilityBasedOnLogin();
            }
        };
    });

app.js config

var myApp = angular.module('myApp',['ngRoute','ngCookies']);

myApp.config(function ($routeProvider,$httpProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'app/module/public/index.html',
            header: 'app/partials/header.html',
            footer: 'app/partials/footer.html'
        })
        .when('/login', {
            templateUrl: 'app/module/login/login.html',
            header: 'app/partials/header.html',
            footer: 'app/partials/footer.html'
        })
        .when('/home', {
            templateUrl: 'app/module/home/home.html',
            header: 'app/partials/header.html',
            footer: 'app/partials/footer.html'
        })
        .when('/register', {
            templateUrl: 'app/module/register/register.html',
            header: 'app/partials/header.html',
            footer: 'app/partials/footer.html'
        })
        .otherwise({redirectTo: '/'});
});

Code to add header and footer on app run

 // Adds Header and Footer on route change success
    $rootScope.$on('$routeChangeSuccess', function (ev, current, prev) {
        $rootScope.flexyLayout = function(partialName) { return current.$$route[partialName] };
    });

I tried this POST solution but still the same effect. How do i change the menus without page refresh??

Answer 1

You may look into ui-router. It supports multiple and nested views.

Demo Fiddle

Click on First and Second to navigate between both states.

Here is the basic setup

First you need the views:

<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>

Then some sort of navigation to switch between ui states:

<ul>
    <li><a href="#" ui-sref="first">First</a></li>
    <li><a href="#" ui-sref="second">Second</a></li>
</ul>    

Here is a basic state configuration:

myApp.config(function($stateProvider, $urlRouterProvider) {

    // default route
    $urlRouterProvider.otherwise("/first");

    // ui router states
    $stateProvider
        .state('first', {
            url: "/first",
            views: {
                header: {
                    template: '<h1>First header</h1>',
                    controller: function($scope) {}
                },
                content: {
                    template: '<p>First content</>',
                    controller: function($scope) {}
                },
                footer: {
                    template: '<div>First footer</div>',
                    controller: function($scope) {}
                }
            }
        })
        .state('second', {
            url: "/second",
            views: {
                header: {
                    template: '<h1>Second header</h1>',
                    controller: function($scope) {}
                },
                content: {
                    template: '<p>Second content</>',
                    controller: function($scope) {}
                },
                footer: {
                    template: '<div>Second footer</div>',
                    controller: function($scope) {}
                }
            }
        });

});