使用http.get将值从JSON scope.value传递到scope.value

Question

我目前正在编写一段代码，该代码显示从json到图表JS的文件。

var app = angular.module('cpu-usage', []);
app.controller('GaugeController', ['$scope', '$http',
function($scope, $http) {

    var viewAll = this;
    viewAll.gauge = [];
    $http.get('dom/json/cpuUsage.json').success(function(data){
        viewAll.gauge = data;
    });

    $scope.value = viewAll.gauge[0].value;

但是，我很难从变量数组viewAll.gauge中提取值。我犯了一个错误

Error: viewAll.gauge[0] is undefined
@http://localhost:8080/js/directives/cpusagegauge.js:11:2
e@http://localhost:8080/js/angular.min.js:35:343
h/<.instantiate@http://localhost:8080/js/angular.min.js:35:474
ce/this.$get</<@http://localhost:8080/js/angular.min.js:68:140
x/<@http://localhost:8080/js/angular.min.js:54:226
q@http://localhost:8080/js/angular.min.js:7:384
x@http://localhost:8080/js/angular.min.js:54:89
g@http://localhost:8080/js/angular.min.js:48:28
g@http://localhost:8080/js/angular.min.js:48:1
g@http://localhost:8080/js/angular.min.js:48:1
x@http://localhost:8080/js/angular.min.js:55:10
g@http://localhost:8080/js/angular.min.js:48:28
x@http://localhost:8080/js/angular.min.js:55:10
z/<@http://localhost:8080/js/angular.min.js:61:261
l/k.success/<@http://localhost:8080/js/angular.min.js:73:32
Re/e/m.promise.then/L@http://localhost:8080/js/angular.min.js:99:147
Re/e/m.promise.then/L@http://localhost:8080/js/angular.min.js:99:147
Re/f/<.then/<@http://localhost:8080/js/angular.min.js:100:321
me/this.$get</g.prototype.$eval@http://localhost:8080/js/angular.min.js:111:1
me/this.$get</g.prototype.$digest@http://localhost:8080/js/angular.min.js:108:458
me/this.$get</g.prototype.$apply@http://localhost:8080/js/angular.min.js:112:323
g@http://localhost:8080/js/angular.min.js:73:285
x@http://localhost:8080/js/angular.min.js:77:322
Ne/</y.onreadystatechange@http://localhost:8080/js/angular.min.js:78:358

http://localhost:8080/js/angular.min.js
Line 93

顺便说一下，我的JSON文件很小。

[{
"value": "80"
}]

Answer 1

问题是$http.get()的回调是异步调用的。在您的例子中，viewAll.gauge = data;是在$scope.value = viewAll.gauge[0].value;之后调用的

下列措施应能发挥作用：

var app = angular.module('cpu-usage', []);
app.controller('GaugeController', ['$scope', '$http',
    function($scope, $http) {

    var viewAll = this;
    viewAll.gauge = [];
    $http.get('dom/json/cpuUsage.json').success(function(data){
        $scope.value = data.gauge[0].value;
    });
})

此外，如果要更新异步回调中的作用域变量，则必须将其包装在$scope.$apply(function() { //your code goes here });中。以下是完整的示例：

var app = angular.module('cpu-usage', []);
app.controller('GaugeController', ['$scope', '$http',
    function($scope, $http) {

    var viewAll = this;
    viewAll.gauge = [];
    $http.get('dom/json/cpuUsage.json').success(function(data){
        $scope.apply(function() {
            $scope.value = data.gauge[0].value;
        });
    });
})