Question

我知道这听起来违反直觉，但请听我的情况。我有一个“topbar”视图和一个“主要”视图。顶部栏没有与任何特定视图关联的特定数据，但它可以根据用户的登录状态进行更改。这确实有助于保持我的网站的这一部分健壮，但它的成本很高：当我想使用“解决”时，顶部栏完全丢失。我理解这背后的逻辑，但我想知道是否有目标确定哪个视图实际阻止解决？

如果我只能阻止我的“主视图”，但允许我的“顶部”视图渲染，那么这将是完美的。我也不想避免使用resolve来避免在首次加载视图时主视图闪烁无意义。

我的路线是什么样的：

$stateProvider..state("about", {
        url: "/about",
        views: {
            "topbar": {
                templateUrl: "/app/templates/topnav.html"
            },
            "main": {
                templateUrl: "/app/home/about.html",
                controller: ["$rootScope", function ($rootScope) {
                    $rootScope.pageTitle = "About";
                }]
            }
        }
    }).state("courses", {
        url: "/courses",
        views: {
            "topbar": {
                templateUrl: "/app/templates/topnav-loggedin.html"
            },
            "main": {
                templateUrl: "/app/courses/courses.html",
                controller: "coursesController"
            }
        },
        resolve: {
            currentCourse: ["$http", function($http) {
                 // load course
            }]
        }
    });

Answer 1

我可能会为需要登录顶部模板的所有州创建一个父级抽象状态。例如

.state('loggedin', {
    abstract: true,
    views: {
        topbar: {
            templateUrl: '/app/templates/topnav-loggedin.html'
        }
    }
}).state('courses', {
    parent: 'loggedin', // or name the state 'loggedin.courses'
    url: '/courses',
    views: {
        'main@': { // the "main" view in the root state
            templateUrl: '/app/courses/courses.html',
            controller: 'coursesController'
        }
    },
    resolve: { ... }
});

Angular ui-router在解析之前加载特定视图

1 个答案: