angularJS范围在HTTP get之后不会更新

angularJS scope not updating after HTTP get

本文关键字:更新 之后 get 范围 HTTP angularJS      更新时间:2023-09-26

我有一个angularJS应用程序,其中包括在后端使用Express +护照处理的登录功能; 直到最近工作正常,但我已经改变了一些东西,现在它不起作用,我不知道如何解决我的问题。

登录登录页面后,您将被重定向到索引,$scope.cUser.userName 变量应具有您当前的用户名,但是在我实际刷新(f5)整个页面之前,该页面不会更新用户名的范围!有趣的是,$scope.cUser.created的值确实在页面上正确更新和呈现。我可以确认快递在 JSON 中正确将用户名传递给 angular

登录

控制器中的登录方法:

$scope.login = function(){
        $http.post('/users/login', {
            username: $scope.user.username,
            password: $scope.user.password
        })
        .success(function(user){
            toaster.pop('success', "Success!", "You have been logged in");  
            $rootScope.$broadcast('loggedIn', user);
            $location.path('/');
        })
        .error(function(user){
            toaster.pop('error', 'We couldn''t log you in!', 'The provided user credentials are incorrect');
            $location.url('/login');
        });
    };

检查是否在应用程序运行时登录:

$http.get('/users/loggedin').success(function(user){
            if (user.loggedin !== false){
                $rootScope.$broadcast('loggedIn', user);
            } else {
                $rootScope.$broadcast('loggedOut');
            }
        });

这是我的"主控制器",它在ng视图之外的整个网站上运行:

$scope.cUser = {};
        $scope.$on('loggedIn', function(event, user){
            $timeout(function(){
                $scope.$apply(function(){
                    $scope.cUser.loggedIn = true;
                    $scope.cUser.userName = user.username;
                    $scope.cUser.created = user.created;
                });
            });
        });
        $scope.$on('loggedOut', function(event){
            $scope.cUser.loggedIn = false;
            $scope.cUser = {};
            $scope.$apply();
        });

注销功能按预期工作,但页面上未呈现 $scope.cUser.userName!请帮忙!

尝试通过

打印这些函数中的用户和用户名来进行调试

    $scope.$on('loggedIn', function(event, user){
        //$timeout(function(){ // you don't need apply or timeout here, its automatic
            //$scope.$apply(function(){ 
                console.log('logged in', user);
                $scope.cUser.loggedIn = true;
                $scope.cUser.userName = user.username;
                $scope.cUser.created = user.created;
            //});
        //});
    });
    $scope.$on('loggedOut', function(event){
        $scope.cUser.loggedIn = false;
        $scope.cUser = {};
        console.log('logged out', $scope.cUser);
        //$scope.$apply();
    });

并在您的 html 中包含 cUser,如下所示:

    <div> {{cUser}} </div> <!-- this should print a json object -->

以查看当前存储在值中的内容。

接下来,请确保您的$http调用也涵盖了错误场景:

$http.get('/users/loggedin').then(function(){
        var user = response.data;
        console.log('user', user);
        if (user.loggedin !== false){
            $rootScope.$broadcast('loggedIn', user);
        } else {
            $rootScope.$broadcast('loggedOut');
        }
    }, function(reason){
         // this is the error scenario
         console.log('error', reason);
    });

这应该使您更接近回答问题所在。