Question

我正在开发基于Angular 1和ui-router的应用程序。下面是我的索引页面代码

<div ng-if="!authenticated">
        <div ui-view></div>
    </div>

    <div ng-if="authenticated">
        <!-- header start -->
        <div header></div>
        <!-- header end -->
        <div class="wrapper" id="wrapper">
            <!-- sidebar start -->
            <div sidebar></div>
            <!-- sidebar end -->
            <div class="content">
                <div class="container-fluid">
                    <div ui-view></div>
                </div>
            </div>
        </div>
        <!-- footer start -->
        <div footer></div>
        <!-- footer end -->
    </div>

路由器Congif：

$stateProvider
    .state(CONSTANTS.STATE.LOGIN, {

        url: CONSTANTS.PAGE_URL.LOGIN,
        templateUrl: "./resources/login/login.tpl.html",
        controller: 'LoginCtrl',
        data: { pageTitle: 'Title for Login'},
        permit : {
            loginRequired: false,
            resources : [ PERMISSIONS.RESOURCES.ALL ]
        }
    }).state('abc', {
            abstract: true,
            url: CONSTANTS.PAGE_URL.BASE,
            controller: 'AbcCtrl',
            templateUrl: "./resources/abc/base/abc.tpl.html"
    }).state('abc.dashboard', {

        url: CONSTANTS.PAGE_URL.DASHBOARD,
        templateUrl: "./resources/abc/dashboard/dashboard.tpl.html",
        data: { pageTitle: 'Title for Dashboard' },
        controller: 'DashboardCtrl',
        permit : {
            loginRequired : true,
            resources : [ PERMISSIONS.RESOURCES.ALL ]
        }
    }).......

问题：用户登录后，新的ui-view会在短时间内显示未经身份验证的页面视图，然后加载经过身份验证的内容。我该如何避免这个问题？

Answer 1

尝试更改此

<div ng-if="!authenticated">
        <div ui-view></div>
</div>

到此

<div ng-if="!authenticated" ng-cloak>
        <div ui-view></div>
</div>

ngCloak将阻止这种情况发生。

角度ui-view无法正确加载

1 个答案: