javascript - HTTP 获取后 angularJS 范围不更新

Question

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

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

登录 Controller 中的登录方法:

$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');
            }
        });

这是我的“mainController”，它在 ng-view 之外的整个网站上运行:

$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 未在页面上呈现!请帮忙!

Answer 1

尝试通过在这些函数中打印出用户和用户名来进行调试

    $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);
    });

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