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

Question

尝试使用自定义指令根据用户登录显示隐藏菜单。它在 View 模板中一切正常，但在标题中不起作用[标题是不同的模板]。不过，它在页面刷新时工作正常。

标题.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>

已记录指令

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

在应用程序运行时添加页眉和页脚的代码

 // 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 。它支持多个和嵌套 View 。

Demo Fiddle

单击First 和Second 在两个状态之间导航。

这是基本设置

首先您需要 View :

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

然后是某种在用户界面状态之间切换的导航:

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

});