$ location.path经过一定的超时不工作 [英] $location.path after a certain timeout does not work

问题描述

我试图进行登录身份验证，我尝试使用angularJS显示进度来看，是这样的：

 的app.config（函数（$ locationProvider，$ routeProvider）{
    $ routeProvider
            。什么时候（'/'， {
                模板：，
                控制器：的IndexController
            }）
            。当（'/主'，{
                templateUrl：意见/ main.html中，
                控制器：MainController
            }）
            。当（'/登录'，{
                templateUrl：意见/ login.html的，
                控制器：的LoginController
            }）
            。当（'/进步'，{
                templateUrl：意见/ progress.html'，
                控制器：ProgressController
            }）
        }）;
VAR LOGGED_IN = FALSE;
函数索引控制器（$范围，$位置）{
    如果（LOGGED_IN）{
        $ location.path（/主）;
    }其他{
        $ location.path（/登录）;
    }
}
功能validateEmail（电子邮件）{
    VAR重= /^(([^<>()[\\]\\\\.,;:\\s@\\\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\\\"]+)*)|(\\\".+\\\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;
    返回re.test（电子邮件）;
}
功能的LoginController（$范围，$位置）{
    $ scope.username =;
    $ scope.password =;
    $ scope.login =功能（）{
        如果（$ scope.username =！＆放大器;＆安培; $ scope.password！=）{
            如果（！validateEmail（$ scope.username））{
                警报（无效的邮件！）;
            }其他{
                $ location.path（/进展）;
                的setTimeout（函数（）{// JUST FOR测试之前添加AJAX控件
                    LOGGED_IN = TRUE;
                    $ location.path（/主）; //不调用MainController并且不改变模板
                }，2000）;
            }
        }其他{
            警报（用户名和放大器;密码obbligatori！）;
        }
    };
    $ scope.register =功能（）{    };
}
功能ProgressController（$范围）{
    $ scope.loading = TRUE;
}
功能MainController（$范围）{}
 

在这里progress.html包含

 ＆LT; D​​IV NG秀=加载类='装入'＆GT;
  ＆LT; IMG SRC =IMG / loading.gif'＆GT;
＆LT; / DIV＆GT;
 

解决方案

我认为你应该使用 $超时

<一个href=\"http://$c$c.angularjs.org/1.2.13/docs/api/ng\">http://$c$c.angularjs.org/1.2.13/docs/api/ng.$timeout

$超时（函数（）{
  LOGGED_IN = TRUE;
  $ location.path（/主）;
}，2000）;

当然，它需要注入的控制器$超时。

i'm trying to perform login auth and i'm trying to show a progress view using angularJS, something like:

app.config(function($locationProvider,$routeProvider) {
    $routeProvider
            .when('/', {
                template: " ",
                controller  : IndexController
            })
            .when('/main', {
                templateUrl : 'views/main.html',
                controller  : MainController
            })
            .when('/login', {
                templateUrl : 'views/login.html',
                controller  : LoginController
            })
            .when('/progress', {
                templateUrl : 'views/progress.html',
                controller  : ProgressController
            })
        });


var logged_in = false;
function IndexController($scope,$location){
    if(logged_in){
        $location.path("/main");
    }else{
        $location.path("/login");
    }
}
function validateEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}
function LoginController($scope,$location){
    $scope.username   = "";
    $scope.password   = "";
    $scope.login = function(){
        if($scope.username!="" && $scope.password!=""){
            if(!validateEmail($scope.username)){
                alert("Invalid e-mail!");
            }else{
                $location.path("/progress");
                setTimeout(function(){ // JUST FOR TEST BEFORE ADD AJAX CONTROL
                    logged_in = true;
                    $location.path("/main"); // DOES NOT CALL MainController AND DOES NOT CHANGE TEMPLATE
                },2000);
            }
        }else{
            alert("Username & Password obbligatori!");
        }
    };
    $scope.register = function(){

    };
}
function ProgressController($scope){
    $scope.loading       = true;
} 
function MainController($scope){}

where progress.html contains

<div ng-show="loading" class='loading'>
  <img src='img/loading.gif'>
</div>

解决方案

I think you should use $timeout

http://code.angularjs.org/1.2.13/docs/api/ng.$timeout

$timeout(function(){ logged_in = true; $location.path("/main"); },2000);

Of course it needs to inject $timeout in controller.

这篇关于$ location.path经过一定的超时不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！