angularJS 范围在 HTTP 获取后未更新

Question

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

在登录页面上登录后，您将被重定向到索引，并且 $scope.cUser.userName 变量应该包含您当前的用户名，但是在我实际刷新之前，该页面不会更新 userName 的范围(f5) 整个页面！有趣的是，$scope.cUser.created 值确实更新并在页面上正确呈现。我可以确认 express 正确地将用户名传送到 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');
            }
        });

这是我的 '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);
    });

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

angularJS 范围在 HTTP 获取后未更新

angularJS scope not updating after HTTP get

javascript

angularjs

angularjs-scope