在AngularJS中加載異步數據

調用函數時出現Cannot read property of undefined錯誤，但數據正在正確顯示。在AngularJS中加載異步數據

根據我目前閱讀的內容，這是因爲AngularJS所做的數據異步加載，我應該使用承諾來避免這種情況。

我在網上搜索和Angular的文檔，但我不明白如何使用它。

如果有人能幫助我，我將不勝感激。

目前，我有以下代碼：

.factory('Test', ['$resource', function ($resource) { 
    return $resource('data.json'); 
}]) 

.controller('MyCtrl', ['$scope', 'Test', function($scope, Test) { 

Test.get(function (data) { 
    $scope.myData = data; 
}); 

$scope.myFunction = function() { 
    var min = $scope.myData.min; 
    var max = $scope.myData.max; 
    var diff = max - min; 
    return diff; 
} 

}])

這裏有一個Plunker：http://plnkr.co/edit/3AK70uVbNSdhAIIfdkHb?p=preview

來源

2016-04-27 superjim

你不應該使用$scope.myData.min直到$scope.myData填充，正如你所說正確的是異步這樣可以花點時間。最簡單的辦法就是在這種情況下，只是包裝你的代碼，如果塊：

$scope.myFunction = function() { 
    if ($scope.myData) { 
    var min = $scope.myData.min; 
    var max = $scope.myData.max; 
    var diff = max - min; 
    return diff; 
    } 
}

myFunction是要在每一個消化週期進行檢查所以一旦$ scope.myData可它的功能會評估並返回diff正確。

但是，更好的方法是使用資源返回的promise對象。在這種情況下，你可以做這樣的事情：

function myFunction(myData) { 
    var min = myData.min; 
    var max = myData.max; 
    var diff = max - min; 
    return diff; 
} 

Test.get().$promise.then(myFunction).then(function(data) { 
    $scope.myData = data; 
});

，並在HTML中使用myData沒有的功能：

<div ng-controller="MyCtrl"> 
    {{myData}} 
</div>

演示：http://plnkr.co/edit/2SSk2lChkbvm5ffbHF2n?p=preview

來源

2016-04-27 11:03:45 dfsq

這是一個很好的解決方案，謝謝！ :) – superjim

我只是在想：如果我想爲函數傳遞一個值（例如'{{myData（2）}}'，其中'2'將會是'min'，那麼我不會是能夠使用你的第二種方法，對嗎？ – superjim

然後，你將無法使用它，但是，我不會推薦使用這樣的函數，函數將被調用很多次，可能會有性能問題。最好設置scope屬性並在myFunction中使用它。 – dfsq

只要定義$scope.myData = {}

例如爲您的代碼：

angular.module('myApp', ['ngResource']) 

.factory('Test', ['$resource', function ($resource) { 
    return $resource('data.json'); 
}]) 

.controller('MyCtrl', ['$scope', 'Test', function($scope, Test) { 
    $scope.myData = {} // <--- That's what I have defined 
    Test.get(function (data) { 
     $scope.myData = data; 
    }); 

    $scope.myFunction = function() { 
     var min = $scope.myData.min; 
    var max = $scope.myData.max; 
    var diff = max - min; 
    return diff; 
    } 

}])

來源

2016-04-27 11:02:35 Abhinav

-1

你的代碼是好的，也許有點修改以避免

Cann OT閱讀未定義的錯誤

$scope.myData = Test.get();

的財產那麼在哪裏有

$scope.myFunction = function() { 
    var min = $scope.myData.min; 
    var max = $scope.myData.max; 
    var diff = max - min; 
    return diff || 0; 
}

https://docs.angularjs.org/api/ngResource/service/ $資源

來源

2016-04-27 11:08:06 Murwa

在AngularJS中加載異步數據

回答

相關問題