考虑一下这个Plunkr.
在我的监听器内部,我想根据已解决的承诺更新属性.
$$v？这是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直接修改,这是一个实现细节.相反,then用来获得承诺的结果,然后随意使用它.这需要对代码进行最少的更改.
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!';
}
});
});
});