AngularJS:我应该如何更新监视器侦听器内已解析的promise的属性?

时间:2013-09-07 21:50:08

标签: angularjs promise

考虑this 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!';
    }
  });
});

2 个答案:

答案 0 :(得分:8)

我不会直接修改$$v,这是一个实现细节。相反,使用then来获得承诺的结果,然后随意使用它。这需要对代码进行最少的更改。

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!';
      }
    });
  });
});

答案 1 :(得分:3)

修改promise是有点奇怪,因为promise表示异步执行的操作的结果。它是独立的。

我认为最好添加另一个服务功能来更新数据状态。试试这个

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