I have some action inside a controller. It contains a promise object which, when resolved, should update a view via the controller as binding. The issue is that the resolved value is correct (logged in a console), but assigning it to a controller doesn't update the view. It only updates when the action containing that promise is executed again. So, if I keep on executing it by pressing a button, the update is delayed by one execution.
I'm using AngularJS 1.6.5
. I'm not using $q
. There is no $scop
e either, so no $apply
, please.
My simplified controller with 2 members to compare the behaviour with and without a promise:
var vm = this;
vm.textSync = 0;
vm.textAsync = 0;
vm.onclick = function()
{
var action = new Promise(function(resolve, reject)
{
resolve(vm.textAsync + 1);
});
action.then(function(result)
{
console.log(result);
vm.textAsync = result;
});
vm.textSync++;
};
The logged value is equal to the incremented textSync (1,2,3,...), but textAsync
in a view is equal to textSync - 1
after each click (so it's 0,1,2,...). Why is that and how to fix it?
My simplified view:
<input type="button" value="Click me" ng-click="$ctrl.onclick()" />
<input ng-model="$ctrl.textSync" />
<input ng-model="$ctrl.textAsync" />
Since you don't want to trigger digest cycle you could use $timeout with 0 sec to wait for digest cycle so wrap your promise like this, just omit 0 after function - not necessary:
$timeout(action.then(function(result) {
console.log(result);
vm.textAsync = result;
}));
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.