AngularJS - 双向绑定承诺 - 处理拒绝

Question

我已经发现了一种困难的方式,当你双向绑定一个promise时,angular会为你解除承诺,并且会绑定实际的承诺.我的问题是,如何处理被拒绝的承诺？

我的具体情况是我有一个指令,我从控制器双向绑定一个promise.我的控制器期望该指令处理对该promise的拒绝,因为错误需要在DOM上显示.

在我的指令中,我希望我的绑定变量是一个promise,但我获得了该promise 的解析值.烦人,但是,并不可怕.

问题是当该承诺被拒绝时,指令无法知道.

以这个plunker为例:

http://plnkr.co/edit/m0cOqFhx6TNrDxTbr9Qx?p=preview

我如何处理指令中的承诺拒绝？

谢谢,罗伊

Answer 1

我有三个建议——没有一个是完美的，但它们都有效：

1. 创建一个返回 Promise 的 getter 方法，并使用以下方法将此方法绑定到指令&

2. 绑定延迟对象而不是承诺（丑陋）

3. 当承诺解决/被拒绝时广播事件

我创建了一个包含所有建议的plunker：http://plnkr.co/edit/jsA0PwpQm0xycLclkBU3 ?p=preview

• 控制器：

app.controller('MainCtrl', function($scope,$q,$timeout) {
  var deferred = $q.defer();

  $scope.promise = deferred.promise;
  $scope.deferred = deferred;

  $scope.getPromise = function(){
    return deferred.promise;
  }

  $scope.promise.then(function(msg){
    $scope.$broadcast('promiseThen',{rejected:false,msg:msg});
  },function(msg){
    $scope.$broadcast('promiseThen',{rejected:true,msg:msg});
  });

  $timeout(function(){deferred.reject('No reason...');},1500)
});

• 标记：

<div promise-test deferred="deferred" get-promise='getPromise()' ></div>

• 指示：

app.directive('promiseTest',function(){
  return {
    template:'<div>m1: {{m1}}<br>m2: {{m2}}<br>m3: {{m3}}</div>',
    scope:{getPromise:'&',deferred:'='}
    ,link:function(scope,el,attrs){

      scope.m1 = scope.m2 = scope.m3 = 'Waiting...';

      scope.getPromise().then(function(msg){
        scope.m1 = 'Resolve getPromise: '+msg;
      },function(msg){
        scope.m1 = 'Reject getPromise: '+msg;
      })

      scope.deferred.promise.then(function(msg){
        scope.m2 = 'Resolved deferred.promise: '+msg
      },function(msg){
        scope.m2 = 'Rejected deferred.promise: '+msg
      });

      scope.$on('promiseThen',function(ev,val){
        if(val.rejected){
          scope.m3 = 'Rejected promiseThen: '+val.msg
        }else{
          scope.m3 = 'Resolved promiseThen: '+val.msg          
        }
      })
    }
  }
})