AJAX调用后的角度更新视图

我在等待authService.login（）的回调时遇到问题。在用户完成登录之前，我的视图正在更新。我将引导我们完成代码

设置Angular应用程序：

var htsApp = angular.module('htsApp', []);

下面我正在配置Angular以发出XHR请求：

htsApp.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
}]);

loginPassport（）在用户提交登录表单时触发。这将从我的Angular工厂调用我的authService.login（），但是更新视图的代码在执行之前没有等待回调。帮忙

function loginController($scope, $sce, authService){

    $scope.loginPassport = function() {  //gets called when user clicks login button

        var email = $scope.email;
        var password = $scope.password;

        authService.login(email, password, function(res) {

            //This code is being run before callback is received!!!
            //Update my view in Angular

            $scope.loginMenuContainer = $sce.trustAsHtml(authService.getLoginModuleHtml());
        });


    };
};

authService.login（）异步登录用户

htsApp.factory('authService', function($http, Session){
    return {
        login: function(email, password, callback){
            $http.post("/login", {"email":email, "password":password})
                .success(callback, function(passportRes) {

                    if(passportRes.success){ //We are logged in!!

                        Session.create(passportRes.user.email, passportRes.user.id);

                    } else { //There was an error logging the user in

                    }

                //Passport JS Middleware Error
                }).error(function(data, status, headers, config) {

                });
        },
        isLoggedIn: function(){ //Check if user is logged in

            return !!Session.email;

        },
        getLoginModuleHtml: function(){ //Get correct HTML if user is logged in or not

            var html = '';

            if(this.isLoggedIn()){
                html = '<div>html if user is logged in</div>';
            } else {
                html ='<div>html is user is logged out!</div>';
            }

            return html;
        }
    }
});

---

你应该研究一下承诺。你需要设定一个承诺，让应用程序能够等待登录成功

你必须这样做，因为AngularJS本质上是异步的，设置承诺会让部分等待承诺返回，然后执行应用程序需要等待信息到达的任何部分

查看这篇关于承诺的博客文章。我认为这很好地解释了这一点

---

您可以使用promise和$a在此处对其进行更多分类$q

authService:

htsApp.factory('authService', function ($http, $q, Session)
{
    return {

        login: function (email, password)
        {
            var deffered = $q.defer();

            $http.post("/login", { "email": email, "password": password })

                //sucess
                .then(function (passportRes)
                {

                    if (passportRes.success) { //We are logged in!!

                        Session.create(passportRes.user.email, passportRes.user.id);
                        deffered.resolve();

                    } else { //There was an error logging the user in

                    }


                },
                //error
                function (data, status, headers, config)
                {
                    deffered.reject();

                });

            return deffered.promise;

        },
        isLoggedIn: function ()
        { //Check if user is logged in

            return !!Session.email;

        },
        getLoginModuleHtml: function ()
        { //Get correct HTML if user is logged in or not

            var html = '';

            if (this.isLoggedIn()) {
                html = '<div>html if user is logged in</div>';
            } else {
                html = '<div>html is user is logged out!</div>';
            }

            return html;
        }
    }
});

htsApp.factory('authService', function ($http, $q, Session)
{
    return {

        login: function (email, password)
        {
            var deffered = $q.defer();

            $http.post("/login", { "email": email, "password": password })

                //sucess
                .then(function (passportRes)
                {

                    if (passportRes.success) { //We are logged in!!

                        Session.create(passportRes.user.email, passportRes.user.id);
                        deffered.resolve();

                    } else { //There was an error logging the user in

                    }


                },
                //error
                function (data, status, headers, config)
                {
                    deffered.reject();

                });

            return deffered.promise;

        },
        isLoggedIn: function ()
        { //Check if user is logged in

            return !!Session.email;

        },
        getLoginModuleHtml: function ()
        { //Get correct HTML if user is logged in or not

            var html = '';

            if (this.isLoggedIn()) {
                html = '<div>html if user is logged in</div>';
            } else {
                html = '<div>html is user is logged out!</div>';
            }

            return html;
        }
    }
});

function loginController($scope, $sce, authService)
{

    $scope.loginPassport = function ()
    {  //gets called when user clicks login button

        var email = $scope.email;
        var password = $scope.password;

        authService.login(email, password).then(function ()
        {
            $scope.loginMenuContainer = $sce.trustAsHtml(authService.getLoginModuleHtml());
        }, function ()
        {
            alert("login error");
        });
    };

}