5

プロミスを双方向でバインドすると、Angular がプロミスを解決し、実際のプロミスをバインドするという難しい方法を発見しました。私の質問は、拒否された約束をどのように処理するかということです。

私の特定のケースは、コントローラーからのプロミスを双方向バインドするディレクティブがあることです。エラーを DOM に表示する必要があるため、コントローラーはディレクティブがその約束の拒否を処理することを期待しています。

私のディレクティブでは、バインドされた変数が約束であることを期待していましたが、代わりにその約束の解決された値を取得しています。迷惑ですが、ひどいものではありません。

問題は、その約束が拒否されたときです。指令には知る方法がありません。

例として、このプランカーを参照してください。

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

ディレクティブでプロミスの拒否を処理するにはどうすればよいですか?

ありがとう、ロイ

4

2 に答える 2

1

3 つの提案があります。どれも完璧ではありませんが、すべて機能します。

  1. promise を返すゲッター メソッドを作成し、このメソッドをディレクティブにバインドします。&

  2. promise の代わりに deferred オブジェクトをバインドします (醜い)

  3. promise が解決/拒否されたときにイベントをブロードキャストする

すべての提案を含むプランカーを作成しました: 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          
        }
      })
    }
  }
})
于 2013-04-27T20:28:35.710 に答える
1

を使用して、成功およびエラーのコールバックをパラメーターとして渡すことができます&。

このオプションでは、コントローラはコールバックを に追加する責任があります.then。

コントローラ

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

  $scope.register = function(callback, errback) {
    deferred.promise.then(callback, errback);
  }

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

指令

app.directive('promiseTest',function(){
  return {
    template:'<div>m1: {{m1}}',
    scope:{register:'&'},
    link:function(scope,el,attrs){

      scope.m1 = 'Waiting...';

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

HTML

<div promise-test register='register(success, errback)' ></div>

プランカー

于 2013-09-04T00:52:37.693 に答える