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

在应用运行中添加页眉和页脚的代码

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

});

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

1 个答案:

`Demo Fiddle`

这是基本设置