从控制器访问范围值

时间:2015-03-09 12:36:34

标签: javascript angularjs

我正在使用工厂返回一个对象,但我无法从控制器访问范围值。

我刚开始使用Angular,所以我猜我在这里忽略了一些东西。

app.factory('Jobs', ['$http', function($http) {
    return {
        getJobs : function() {
            return $http.get('/api/jobs');
        }
    }
}]);

app.controller('JobsController', ['$scope', 'Jobs', function ($scope, Jobs) {

    Jobs.getJobs().success(function(data, status, headers, config) {
        $scope.jobs = data;
    }).error(function (error) {
        console.log(error);
    });

    console.log($scope);
    // Returns Object with jobs: Array[89]

    console.log($scope.jobs);
    // Returns undefined
}]);

2 个答案:

答案 0 :(得分:1)

那是因为对服务器的调用是异步的,这意味着你不会在调用后立即获得值,而只是在成功回调中。

app.controller('JobsController', ['$scope', 'Jobs', function ($scope, Jobs) {
Jobs.getJobs()
        .success(function(data, status, headers, config) {
            // now the call to the server is complete, and we have our data
            $scope.jobs = data;
            console.log($scope.jobs); // should show the data
        })
        .error(function (error) {
                console.log(error);
            });

console.log($scope);
// Returns Object with jobs: Array[89]

console.log($scope.jobs);
// Returns undefined because the call to the server isn't complete yet

}]);

答案 1 :(得分:1)

您的承诺在到达日志声明时尚未得到解决。将您的日志语句移动到成功回调中,如下所示。

请注意,我使用的是Angular的$ log服务而不是console.log。如果控制台未打开,Console.log可能会在IE上抛出错误。 $ log处理,并允许您使用$ log.info()和$ log.debug()等来更好地组织日志记录级别。

app.factory('Jobs', ['$http', function($http) {
    return {
        getJobs : function() {
            return $http.get('/api/jobs');
        }
    }

}]);

app.controller('JobsController', ['$scope', 'Jobs', '$log', function ($scope, Jobs, $log) {

    Jobs.getJobs()
            .success(function(data, status, headers, config) {
                $scope.jobs = data;
                $log.info($scope.jobs);
                // Should work now
            })
            .error(function (error) {
                    $log.info(error);
                });

    $log.info($scope);
    // Returns Object with jobs: Array[89]

}]);