Angular 服务调用后范围未更新

Question

我有控制器和服务。

服务执行 http.get 和 return 如果成功则为真，如果错误则为假。

但是在controller中，它正确接收到true或false，但是绑定的html总是显示为true？？

控制器：

app.controller('MyController', function($scope, MyService) {

    MyService.getData(function(isLoggedIn, userData) {

        var loggedIn = isLoggedIn;    
        $scope.isLoggedIn = loggedIn;
        $scope.myUser = userData;
        //$scope.$evalAsync();
        //$scope.$apply();            
    });    
});

app.factory('MyService', function($http, $q) {
    return {

        getData: function(isLoggedIn, userModel) {
            $http.get('../assets/data/data.json')
                .success(function(data) {
                    userModel(data);
                    isLoggedIn(true);
                })
                .error(function(data, status, headers, config) {
                    // If 400 or 404 are returned, the user is not signed in.
                    if (status == 400 || status == 401 || status == 404) {
                        isLoggedIn(false);
                    }                    
                });
        }
    }
});

HTML:

{{isLoggedIn}}

在上面，{{isLoggedIn}}总是正确的。即使我将 http 调用修改为：

$http.get('../blah/blah/blah.json')

努力中.error/fail.

我试过 $scope.$apply() 并且我一直收到摘要循环过程中的错误。求助！！！

Answer 1

我认为您对回调的工作方式有点困惑。您在服务中的 isLoggedIn 参数是您传入的 回调函数 。您的代码已更正：

app.controller('MyController', function($scope, MyService) {

    /*
    The function(response) { is your callback function being passed to the service
    */
    MyService.getData(function(response) {
        var loggedIn = response.isLoggedIn;    
        $scope.isLoggedIn = loggedIn;
        $scope.myUser = response.userModel;           
    });    
});

app.factory('MyService', function($http, $q) {
    return {
        getData: function(callback) {
            $http.get('../assets/data/data.json')
                .success(function(data) {
                    //Execute your callback function and pass what data you need
                    callback({userModel: data, isLoggedIn: true});
                })
                .error(function(data, status, headers, config) {
                    // If 400 or 404 are returned, the user is not signed in.
                    if (status == 400 || status == 401 || status == 404) {
                        callback({isLoggedIn: false});
                    }                    
                });
        }
    }
});

你应该使用 promises...这里有一个更重构的版本：

app.controller('MyController', function($scope, MyService) {
    MyService.getData().then(function(response) {
        var loggedIn = response.isLoggedIn;    
        $scope.isLoggedIn = loggedIn;
        $scope.myUser = response.userModel;           
    });    
});

app.factory('MyService', function($http, $q) {
    return {
        getData: function() {
            return $http.get('../assets/data/data.json')
                .then(function(response) {
                    return {
                        userModel: response.data, 
                        isLoggedIn: true
                    };
                }, function(data, status, headers, config) {
                    // If 400 or 404 are returned, the user is not signed in.
                    if (status == 400 || status == 401 || status == 404) {
                        return {isLoggedIn: false};
                    }                    
                });
        }
    }
});

Angular 服务调用后范围未更新

Angular scope not updating after service call

javascript

angularjs

angularjs-scope

angular-services

angular-controller