Question

我这里有一个棘手的场景。我的index.html页面包含两个ui-view部分。一个用于导航栏，另一个用于页面体。

初始化索引页面时，我将menu-guest.html加载到导航栏视图中，将home.html加载到页面体视图中。

登录成功后，我将导航栏的内容更改为menu-user.html，将page-body更改为welcome.html。它工作正常。

但菜单页面上有一些常规链接，例如“帮助”，它为来宾和注册用户加载完全相同的正文内容。

如何定义帮助内容的路线？如果用户点击帮助链接，我只想更改整个网页的正文内容，因为菜单模板加载时很好（1）init状态：我的webapp的root url（/）在浏览器中打开（2）成功登录后：菜单更新，我不想更改/重新加载，直到用户注销。（3）用户注销：默认情况下，menu-guest.html被加载到菜单视图中。

如果我从“帮助”路线中删除含有“navigation-bar”：{templateUrl：“...”}的内容的行，那么菜单内容就会消失，我猜这个空页将按角度加载。

如果我需要硬编码帮助模板的名称，而不是我需要为帮助菜单创建两个路径：guess-help和user-help。我想避免它。

的index.html

<!-- Navigation Bar -->
<div ui-view="navigation-bar"></div>

<!-- Page Body -->
<div ui-view="page-body"></div>

route.js

app.config(function($stateProvider) {
    $stateProvider
        // public pages
        .state('root', {
            url: "/",
            views: {
                    "navigation-bar": { templateUrl: "app/components/public/navigation-bar/menu-guest.html" },
                    "page-body":      { templateUrl: "app/components/public/home/home.html" }
                }
            })
            .state('log-in', {
                url: "/log-in",
                views: {
                    //"navigation-bar": { templateUrl: "app/components/public/navigation-bar/menu-guest.html" },
                    "page-body":      { templateUrl: "app/components/public/log-in/logIn.html" }
                }
            })
            .state('help-general', {
                url: "/help-general",
                views: {
                    //"navigation-bar": { templateUrl: "app/components/public/navigation-bar/menu-guest.html" },
                    "page-body":      { templateUrl: "app/components/public/help/help-general.html" }
                }
            })

            // private pages
            .state('private/welcome', {
                url: "/private/welcome",
                data : { requiresLogin: true },
                views: {
                    "navigation-bar": { templateUrl: "app/components/protected/navigation-bar/menu-user.html" },
                    "page-body":      { templateUrl: "app/components/protected/welcome/welcome.html" }
                }
            });
    });

    app.run(function($rootScope, $state, loginFactory) {
        $rootScope.$on('$stateChangeStart', function(event, toState) {
            var isAuthenticationRequired = toState.data && toState.data.requiresLogin && !loginFactory.isLoggedIn();

            if (isAuthenticationRequired == true) {
                loginFactory.setToState(toState);
                event.preventDefault();
                $state.go('log-in');
            }
        });
     });

angular-ui-router - ＆gt;模板继承

0 个答案: