Geek Answers Handbook

AngularJS: How do I update a property with a resolved promise inside my observer?

Consider this Plunkr .

Inside my watch observer, I would like to update the property as promised.

  • Is changing the values ​​in the $$v property correct?
  • If not, what should I do?

Here is the HTML:

 <!DOCTYPE html> <html id="ng-app" ng-app="myAngularApp"> <head> <script data-require=" angular.js@ *" data-semver="1.2.0-rc2" src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script> <script src="script.js"></script> </head> <body ng-controller="MyController"> <input ng-model="myDto.Weight" />{{myDto.Status}} </body> </html>

Here is the javascript:

 var myDto = {Weight: 200, Status: 'Acceptable'}; var myAngularApp = angular.module('myAngularApp', []); myAngularApp.factory('myService', function($q){ return { getMyDto: function(){ var deferred = $q.defer(); deferred.resolve(myDto); return deferred.promise; } }; }); myAngularApp.controller('MyController', function MyController($scope, myService){ $scope.myDto = myService.getMyDto(); $scope.$watch('myDto.Weight', function(newVal, oldVal){ if (newVal < 150) { $scope.myDto.$$v.Status = 'Too Light!'; // Is this the recommended way of doing it? } else if (500 < newVal) { $scope.myDto.$$v.Status = 'Too Heavy!'; } else if (Number(newVal)) { $scope.myDto.$$v.Status = 'Acceptable'; } else { $scope.myDto.$$v.Status = 'Not a number!'; } }); });
+7
angularjs promise
source share
2 answers

I would not directly modify $$v , this is a detail of the implementation. Instead, use then to get the result of the promise, and then use it as you like. This requires a minimal change to your code.

Demo link

 myAngularApp.controller('MyController', function MyController($scope, myService){ ($scope.myDto = myService.getMyDto()).then(function(myDto) { $scope.$watch('myDto.Weight', function(newVal, oldVal){ if (newVal < 150) { myDto.Status = 'Too Light!'; // Is this the recommended way of doing it? } else if (500 < newVal) { myDto.Status = 'Too Heavy!'; } else if (Number(newVal)) { myDto.Status = 'Acceptable'; } else { myDto.Status = 'Not a number!'; } }); }); });
+7
source share

It’s a little strange to change a promise, because a promise is the result of an asynchronous action. It is self-sufficient.

I think it's better to add another utility function to update status data. try it

 myAngularApp.factory('myService', function ($q) { var deferred = $q.defer(); return { getMyDto: function () { deferred.resolve(myDto); return deferred.promise; }, updateStatus: function (status) { myDto.Status = status; deferred.resolve(myDto); return deferred.promise; } }; }); myAngularApp.controller('MyController', function MyController($scope, myService) { $scope.myDto = myService.getMyDto(); $scope.$watch('myDto.Weight', function (newVal, oldVal) { if (newVal < 150) { myService.updateStatus('Too Light!'); } else if (500 < newVal) { myService.updateStatus('Too Heavy!'); } else if (Number(newVal)) { myService.updateStatus('Acceptable'); } else { myService.updateStatus('Not a number!'); } }); });

Updated Plunker

+3
source share

More articles:


All Articles