在标题模板angularjs中显示隐藏菜单

Question

尝试使用自定义指令基于用户登录显示隐藏菜单.这一切在视图模板中工作正常,但在标题中它不起作用[标题是一个不同的模板].它在页面刷新时工作正常.

了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指令

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配置

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: '/'});
});

在app运行时添加页眉和页脚的代码

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

我试过这个POST解决方案,但效果仍然相同.如何在没有页面刷新的情况下更改菜单？

Answer 1

你可以看看ui-router.它支持多个和嵌套视图.

Demo Fiddle

单击First并Second在两个状态之间导航.

这是基本设置

首先你需要观点:

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

然后某种导航在ui状态之间切换:

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

这是一个基本的状态配置:

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) {}
                }
            }
        });

});