【问题标题】:Angular scope not updating after service call服务调用后角度范围不更新
【发布时间】:2016-02-03 14:55:52
【问题描述】:

我有一个控制器和服务。

服务执行http.get,成功则返回true,错误则返回false。

但是,在控制器中,它正确接收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() 并且我不断收到处理中的摘要循环错误。救命!!!

【问题讨论】:

  • 您在服务中使用isLoggedInuserModel 就像它们是方法一样...您将什么传递到服务中?
  • @tymeJV - 我没有向服务传递任何内容..
  • getData 定义有两个参数,您传递一个参数(匿名函数)。而userModel$http.get 回调中将是undefined 因为你没有传递第二个参数所以userModel(data); 应该抛出一个错误,你检查你的控制台了吗?
  • @PatrickEvans - 正确,userModel 抛出错误

标签: javascript angularjs angularjs-scope angular-services angular-controller


【解决方案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});
                    }                    
                });
        }
    }
});

您应该使用 Promise... 这是一个更加重构的版本:

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

【讨论】:

  • 谢谢说的有道理,重构版本有3级return,都是必须的吗?只是想多了解一点..
  • 是的......所以第一个return 只是你的对象,你所有的调用都是函数。第二个return 返回整个$http 承诺,第三个返回来自$http 调用的数据,可通过.then@OamPsy 访问
  • 感谢您的解释,{{isLoggedIn}} 在它的 console.log 为 false 时仍然在 html 中显示为 true
  • 你在哪里记录它?服务是否返回false
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-12-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多