Why doesn't data fetched in an $http call, always show up/get used outside it?
Question
I am sometimes, and very very randomly, not able to use data received in an $http call. The data thus received will bind to the variable in which it is received, but it won't transfer to another variable. For example, below {{avariable}} shows up in the HTML page (it stops being null and displays the data from the server) but {{anumber}} does not change from 0 to the new data (even though I do $scope.anumber = $scope.avariable). Sometimes this problem is solved by assigning the equality in the $http call itself and not later, but this time it did not work that way either. I imagine this has something to do with digest, eval cycles right? I don't necessarily understand them well or how they work in this context. Though, I do use $timeout when necessary.
Everything is working on the Rails/backend side - I checked by directly going to the URL in my browser. Also of course, as mentioned earlier, {{avariable}} does change from null to the server data.
AngularJS code:
myangularmodule.controller('appcontroller', function($rootScope, $scope, $filter, $location, $state, $timeout, $http) {
$scope.avariable = null;
$scope.anumber = 0;
$scope.ihappenwhenthatbuttonispressed {
$timeout(function(){
$http.get('/employees/getthisdata/' + value + '.json').success(function (data) {
$scope.avariable = data.avariable;
});
}, 5);
$scope.anumber = $scope.avariable;
};
});
My HTML page:
<html>
<head>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
</head>
<body ng-app="myangularmodule">
<div ng-controller="appcontroller">
<button ng-click="ihappenwhenthatbuttonispressed(anumber)">
Click me
</button>
{{avariable}}
{{anumber}}
</div>
</body>
</html>
2 answers
solution1
0 2015-10-07 23:14:08
This is because AJAX calls in Javascript are asynchronous. You are calling an http request, and then immediately setting $scope.anumber = $scope.avariable and not waiting for the http response. So when you click the button the first time, you are essentially setting $scope.anumber = null . When the http response is received, $scope.avariable is being set as your data.variable and then the function exits.
If you want to update both, you need something like this:
$http.get('/employees/getthisdata/' + value + '.json').success(function (data) {
$scope.avariable = data.avariable;
updateANumber();
});
function updateANumber(){
$scope.anumber = $scope.avariable;
}
solution2
0 2015-10-07 23:18:54
You could also do this:
$http.get('/employees/getthisdata/' + value + '.json').success(function (data) {
$scope.avariable = data.avariable;
$scope.anumber = $scope.avariable;
});
The timeout part isn't needed.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.