Question

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

登录登录页面后，您将被重定向到索引，$ 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');
        });
    };

检查是否登录了app app：

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

这可以让你更接近回答问题所在。

HTTP获取后，angularJS范围不会更新

1 个答案: