Question

我需要帮助消除Angular的闪烁。每次新路线通过时我都会闪烁。我在ng-view外面有一个登录和注销按钮，它使用ng-if =“authenticated”。问题是每次单击菜单项并显示新视图时，注销或登录按钮都会闪烁。有没有办法消除这个？下面是模块，配置和运行功能。

PS。我是Angular的新手。这是一个关于使用Angular，php和mysql进行登录系统的教程的脚本。

var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'ui.bootstrap', 'toaster']);

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/login', {
            title: 'Login',
            templateUrl: 'views/login.html',
            controller: 'authCtrl'
        })
        .when('/logout', {
            title: 'Logout',
            templateUrl: 'views/login.html',
            controller: 'logoutCtrl'
        })
        .when('/signup', {
            title: 'Signup',
            templateUrl: 'views/signup.html',
            controller: 'authCtrl'
        })
        .when('/dashboard', {
            title: 'Dashboard',
            templateUrl: 'views/dashboard.html',
            controller: 'authCtrl'
        })
        .when('/posts', {
            title: 'Posts',
            templateUrl: 'views/posts.html',
            controller: 'authCtrl'
        })
        .when('/stats', {
            title: 'Stats',
            templateUrl: 'views/stats.html',
            controller: 'authCtrl'
        })
        .when('/ambas', {
            title: 'Ambassadors',
            templateUrl: 'views/ambassadors.html',
            controller: 'authCtrl'
        })
        .when('/images', {
            title: 'Images',
            templateUrl: 'views/images.html',
            controller: 'authCtrl'
        })
        .when('/', {
            title: 'Login',
            templateUrl: 'views/login.html',
            controller: 'authCtrl'
        })
        .otherwise({
            redirectTo: '/posts'
        });
}])
.run(function ($rootScope, $location, Data) {
    $rootScope.$on("$routeChangeStart", function (event, next, current) {
        $rootScope.authenticated = false;
        Data.get('session').then(function (results) {
            if (results.uid) {
                $rootScope.authenticated = true;
                $rootScope.uid = results.uid;
                $rootScope.name = results.name;
                $rootScope.email = results.email;
            } else {
                var nextUrl = next.$$route.originalPath;
                if (nextUrl == '/signup' || nextUrl == '/login') {

                } else {
                    $location.path("/login");
                }
            }
        });
    });
});

Answer 1

您在每次路线更改开始时都将经过身份验证的值设置为false。因此，每次用户单击以更改路由时，您将其设置为false，然后片刻之后，如果身份验证正常，则将其设置为true。这会导致闪烁。

因此，请从$rootScope.authenticated = false;回调中移除$routeChangeStart。

$rootScope.$on("$routeChangeStart", function (event, next, current) {
    //$rootScope.authenticated = false; <--- *remove this*
    Data.get('session').then(function (results) {
    ...........

验证用户时角度会闪烁

1 个答案: