[英]$scope variable value not updated in controller Angular JS?
Below added my controller code. 下面添加了我的控制器代码。 I want to access value of $scope.FCGId ....... How can access this variable? 我想访问$ scope.FCGId的值.......如何访问此变量?
angular.module('hotelApp.controllers')
.controller('menuCtrl', ['$scope','menu'
function($scope,'menu') {
$scope.categories = [];
$scope.FCGId = 0
$scope.items = [];
$scope.getCategories = function() {
menu.getCategories().success(function(data) {
$scope.categories = data;
$scope.FCGId = data['rows'][0].GRPCOD;
});
}
$scope.getItems = function(gropuId) {
menu.getItems(gropuId).success(function(data) {
$scope.items = data;
console.log(data);
});
}
$scope.$on('$ionicView.afterEnter', function() {
$scope.getCategories();
console.log($scope.FCGId);
$scope.getItems($scope.FCGId);
});
}
]);
From, above code returns 0 instead of value updated in getCategories() function. 从上面的代码返回0,而不是getCategories()函数中更新的值。
Your problem happens because javascript almost always runs faster than asynchronous call returns, so your $scope.getItems
always calls before $scope.getCategories
returns. 发生您的问题是因为javascript几乎总是比异步调用返回运行得更快,因此$scope.getItems
总是在$scope.getCategories
返回之前调用。
To strictly order the API calls you need a powerful construct called promise. 要严格订购API调用,您需要一个功能强大的结构,称为promise。 There should be a lot of resources out there, just google "angular promise" and you're good =) 那里应该有很多资源,只是谷歌的“ angular promise”,你就很好=)
Edit: Actually making use of the success function is the most straight forward way to do this 编辑:实际上,使用成功功能是最直接的方法
$scope.getCategories = function() {
menu.getCategories().success(function(data) {
$scope.categories = data;
$scope.FCGId = data['rows'][0].GRPCOD;
$scope.getItems($scope.FCGId); // to here
});
}
$scope.getItems = function(gropuId) {
menu.getItems(gropuId).success(function(data) {
$scope.items = data;
console.log(data);
});
}
$scope.$on('$ionicView.afterEnter', function() {
$scope.getCategories();
console.log($scope.FCGId);
// $scope.getItems($scope.FCGId); // move this line
});
By this way you don't have to deal with all those $q and d's. 这样,您不必处理所有这些$ q和d。 And promise-antipatterns. 和诺言反模式。
Well 好
$scope.getCategories function is giving asynchronous call in below event $ scope.getCategories函数在以下事件中进行异步调用
$scope.$on('$ionicView.afterEnter', function() {
$scope.getCategories();
console.log($scope.FCGId);
$scope.getItems($scope.FCGId);
});
when you call $scope.getCategories() , this asynchronous call is given. 当您调用$ scope.getCategories()时 ,将给出此异步调用。
But script is not waiting for completion of that call. 但是脚本不等待该调用完成。 And script access $scope.FCGId variable in console.log($scope.FCGId); 然后脚本访问console.log($ scope.FCGId);中的 $ scope.FCGId变量; without initialization because asynchronous cal is not completed. 无需初始化,因为异步校准未完成。
Solution to this. 解决方案。
Either you call $scope.getCategories function at the start of controller as initialization part or you should return promise from $scope.getCategories function or use promise in another way as per your requirement. 您可以在控制器的开头调用$ scope.getCategories函数作为初始化部分,或者应该从$ scope.getCategories函数返回promise ,或者根据需要以其他方式使用promise。
EDIT CODE. 编辑代码。
Defined $scope.getCategories as follow 如下定义$ scope.getCategories
inejct $q in your controller. inejct $ q在您的控制器中。
var defer = $q.defer();
$scope.getCategories = function() {
menu.getCategories().success(function(data) {
$scope.categories = data;
// $scope.FCGId = data['rows'][0].GRPCOD;
defer.resolve(data['rows'][0].GRPCOD);
return defer.promise;
});
}
and event handling in this way 和事件处理方式
$scope.$on('$ionicView.afterEnter', function() {
$scope.getCategories().then(function(successData){
$scope.FCGId = successData
console.log($scope.FCGId);
});
$scope.getItems($scope.FCGId);
});
Solution -2. 解决方案-2。 Also there is no dependency while giving call to $scope.getCategories function so you can call it at the starting of comptroller. 同样,在调用$ scope.getCategories函数时没有依赖关系,因此您可以在comptroller的开始处调用它。
Same you can do for the call to $scope.getItems . 您可以对$ scope.getItems进行调用。
Seems like your menu.getCategories() is an asynchronous execution block, and because of deferred execution, you are getting 0 as the value of $scope.FCGId. 似乎您的menu.getCategories()是一个异步执行块,并且由于延迟执行,因此您获得的$ scope.FCGId值为0。
You can pass a function as the second parameter to the getCategories function, that will get executed and perform necessary assignments and further calls. 您可以将一个函数作为第二个参数传递给getCategories函数,该函数将被执行并执行必要的赋值和进一步的调用。
$scope.setFCGValue = function(data) {
$scope.categories = data;
$scope.FCGId = data['rows'][0].GRPCOD;
$scope.getItems($scope.FCGId);
};
$scope.$on('$ionicView.afterEnter', function() {
menu.getCategories().success($scope.FCGValue);
});
What we are doing is passing our custom function, that will be executed after the getCategories() part. 我们正在做的是传递自定义函数,该函数将在getCategories()部分之后执行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.