考虑
this Plunkr.
这是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>
这是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!'; } }); });
我不会直接修改$$v,它是一个实现细节.相反,使用然后获得承诺的结果,然后随意使用它.这需要对代码进行最少的更改.
myAngularApp.controller('MyController',myService){ ($scope.myDto = myService.getMyDto()).then(function(myDto) { $scope.$watch('myDto.Weight',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!'; } }); }); });