重定向到另一个页面会阻止函数返回其值

Question

我有一个登录页面,如果用户登录,我想将用户重定向到另一个HTML页面,在那里我将列出我从服务器获得的用户任务.

问题是:

即使我写的函数正常工作,后端API返回我想要的值(我可以看到控制台上的值详细信息)当我使用重定向代码时$window.location.href = '../Kullanici/userPanel.html页面在登录后立即重定向,并且由于某种原因我不能使用返回的值重定向后的函数.不仅如此,我还无法看到控制台日志中返回的值的详细信息.

这是我的代码:

控制器:

app.controller('myCtrl', ['$scope', '$http', '$window','$mdToast', 'userTaskList',
    function ($scope, $http, $window, $mdToast, userTaskList) {
        $scope.siteLogin = function () {

            var userName = $scope.panel.loginUserName;
            var password = $scope.panel.loginPassword;
            var loginMember = { //JSON data from login form
                K_ADI: $scope.panel.loginUserName,
                PAROLA: $scope.panel.loginPassword
            };
            $http({
                method: 'POST',
                url: 'http://localhost:5169/api/Kullanicilar/KullaniciDogrula',
                headers: {
                    'Content-Type': 'application/json'
                },
                data: loginMember

            }).then(function successCallback(response) {

                console.log("message sent", response);
                $scope.data = response.data.error.data;
                if ($scope.data === true) {//if username and password is correct

                    console.log("User exists");
                    userTaskList.showActiveTasks(userName)
                        .then(function (activeTaskResponse) {
                            var activeTasks = activeTaskResponse;
                            console.log("Active tasks (controller): ", activeTaskResponse);

                            userTaskList.showFinishedTasks(userName)
                                .then(function (finishedTaskResponse) {
                                    var finishedTasks = finishedTaskResponse;
                                    console.log("Finished tasks(controller): ", finishedTaskResponse);
                                    $scope.getMessage();
                                    $window.location.href = '../Kullanici/userPanel.html';
                                }, function (err) {
                                    console.log(err);
                                });

                        }, function (err) {
                            console.log(err);
                        });

                }

            }, function errorCallback(response) {
                console.log("Couldn't send", response);
            });
        }

那么是什么导致了这个问题,我该如何解决呢？

编辑:我嵌套.然后部分,但它正确不工作并给予This value was just evaluated now警告.所以我不能在重定向的HTML页面上使用数据.

我也删除了工厂,因为它使代码看起来非常混乱,它可能不是问题的根源.

Answer 1

我会将你的两个函数嵌套在第一个promise中,然后在完成所有这些函数后重定向.就像是

app.controller('myCtrl', ['$scope', '$http', '$window','$mdToast', 'userTaskList',
  function ($scope, $http, $window, $mdToast, userTaskList) {
    $scope.siteLogin = function () {

        var userName = $scope.panel.loginUserName;
        var password = $scope.panel.loginPassword;
        var loginMember = { //JSON data from login form
            K_ADI: $scope.panel.loginUserName,
            PAROLA: $scope.panel.loginPassword
        };

        $http({
            method: 'POST',
            url: 'http://localhost:5169/api/Kullanicilar/KullaniciDogrula',
            headers: {
                'Content-Type': 'application/json'
            },
            data: loginMember

        }).then(function successCallback(response) {

            console.log("message sent", response);
            $scope.data = response.data.error.data;
            if ($scope.data === true) {//if username and password is correct

                console.log("User exists");
                userTaskList.showActiveTasks(userName)
                    .then(function (res) {
                        var activeTasks = res;
                        console.log("Active tasks (controller): ", res);

                        userTaskList.showFinishedTasks(userName)
                        .then(function (res) {
                            var finishedTasks = res;
                            console.log("Finished tasks(controller): ", res);
                            $scope.getMessage(); 
                            $window.location.href = '../Kullanici/userPanel.html';
                        }, function (err) {
                            console.log(err);
                        });

                    }, function (err) {
                        console.log(err);
                    });

            } else { //if username or password is wrong
                $mdToast.show(
                    $mdToast.simple()
                        .textContent('Username or Password is wrong')
                        .position('right')
                        .hideDelay(3000)
                            );      
            } 
        }, function errorCallback(response) {
            console.log("Couldn't send", response);
        });          
     }
   }
]);

Answer 2

哦,我将ngRoute注入我的AngularJS模块,但尚未使用它.

使用$window.location.href杀死应用程序并加载其他页面,失去$rootScope,$scope和所有的业务数据.

重新设计代码以使用路由器并将数据存储在服务中:

$routeProvider
 .when('/userPanel' , {
     templateUrl: 'partials/userPanel.html',
     controller: panelController
})

 panelService.set(data);
 $location.path("/userPanel.html");     

或使用localStorage存储数据:

 localStorage.setItem('panelData', JSON.stringify(data));
 $window.location.href = '../Kullanici/userPanel.html';

存储在服务中的数据将在路由更改(销毁$ scope)后继续存在.存储的数据localStorage将在页面更改(销毁应用程序)后继续存在.

代码可以简化

这将解决在更改路由之前让页面等待数据的问题.

由于该getMessages函数发出HTTP请求,因此需要修改它以返回一个promise:

$scope.getMessages = getMessages;
function getMessages() {
    return $http({
        method: 'GET',
        url: 'http://localhost:5169/api/chat/chatCek'
    }).then(function successCallback(res) {
        console.log("Mesajlar", res);
        $scope.messages = res.data.error.data;
        return res.data.error.data;
    }, function errorCallback(res) {
        console.log("Hata", res);
        throw res;
    });
}

然后延迟更改路由,直到getMessages数据从服务器返回,从getMessages承诺链:

$http({
    method: 'POST',
    url: 'http://localhost:5169/api/Kullanicilar/KullaniciDogrula',
    data: loginMember
}).
  then(function successCallback(response) {
    console.log("message sent", response);
    $scope.data = response.data.error.data;
    if ($scope.data !== true) { throw "user error" };
    //username and password is correct
    console.log("User exists");
    return userTaskList.showActiveTasks(userName);
}).
  then(function (activeTaskResponse) {
    var activeTasks = activeTaskResponse;
    console.log("Active tasks (controller): ", activeTaskResponse);
    return userTaskList.showFinishedTasks(userName)
}).
  then(function (finishedTaskResponse) {
    var finishedTasks = finishedTaskResponse;
    console.log("Finished tasks(controller): ", finishedTaskResponse);
    //CHAIN from getMessages promise
    return $scope.getMessages();
}).
  then(function(data) {
    console.log(data);
    //SAVE data before changing route
    panelService.set(data);
    $location.path( "/userPanel" );
    //OR STORE data before changing app
    //localStorage.setItem('panelData', JSON.stringify(data));             
    //$window.location.href = '../Kullanici/userPanel.html';
}).
  catch(function (response) {
    console.log("Couldn't send", response);
    throw response;
});