angularjs - Angular UI Bootstrapモーダル

Question

私は Angular UI Bootstrap モーダル (ui.bootstrap.dialog) を使用しており、backdrop: true と backgroundClick: true があります。

しかし、ユーザーがモーダルから離れてクリックすると、閉じるだけでなく追加の機能も実行したいと考えています。

Dialog.prototype._bindEvents を上書きできると考えてソースコードを見ていましたが、うまくいきませんでした。

また、これは元のブートストラップモーダルの「非表示」イベントである可能性があると思いますが、このイベントをキャッチできませんでした。

背景のクリックで実行する関数を定義する方法はありますか。

ありがとう --MB

score 3 · Accepted Answer

これは古い質問であることは知っていますが、ここに来て後で解決策を見つけたので...

次のように、モーダルのスコープにブロードキャストされた「modal.closing」イベントを見ることができます。

.controller('modalCtrl', function($scope, $modalInstance) {

  $scope.$on('modal.closing', function(event, reason, closed) {
      console.log('reason: ', reason);
  });
})

2 番目のパラメーターは理由です ($close() メソッドに渡されるものは何でも)。背景をクリックする理由は背景クリックです

ここで働くプランカー

score 1 · Accepted Answer

モーダルでスコープ破棄イベントを見ることができます:

$scope.$on('$destroy', function () {});

または、モーダルで却下の約束を解決し、DI を通過した新しいものを連鎖させます。

モーダルを作成するときは、遅延オブジェクトを注入します（約束はありません）：

var close = $q.defer();
var modalInstance = $modal.open({
    ...
    closePromise: function () {
        return close;
    }
});

close.promise.then(function ( someData ) {
    // On every modal close
});

そしてモーダルで：

//                         resolve       dismiss
$modalInstance.result.then(angular.noop, function () {
    closePromise.resolve( someData );
});

score 1 · Accepted Answer

ダイアログクラスは現在書き直されていますが、オプションオブジェクトを変更して、クローズ時に呼び出される関数を受け取り、クローズプロトタイプで null でない場合はその関数を呼び出すことができます。

注意してくださいcloseFn

var defaults = {
    backdrop: true,
    dialogClass: 'modal',
    backdropClass: 'modal-backdrop',
    transitionClass: 'fade',
    triggerClass: 'in',
    resolve:{},
    closeFn:null,  // added with null default
    backdropFade: false,
    dialogFade:false,
    keyboard: true, // close with esc key
    backdropClick: true // only in conjunction with backdrop=true
    /* other options: template, templateUrl, controller */
  };

近いプロトタイプでは:

if (self.options.closeFn!==null) {
   self.options.closeFn();   
}

コントローラ：

 function doSomething() {
    alert('something');
  }

  $scope.opts = {
    backdrop: true,
    keyboard: true,
    backdropClick: true,
    template:  t, // OR: templateUrl: 'path/to/view.html',
    controller: 'TestDialogController',
    closeFn: doSomething
  };

ここでこれをモックしました： http://plnkr.co/edit/iBhmRHWMdrlQr4q5d1lH?p=preview

score 0 · Accepted Answer

0

my_dlg.handleBackDropClick を上書きするのはどうですか?

于 2013-05-17T22:28:40.963 に答える

angularjs - Angular UI Bootstrapモーダル

5 に答える 5

Related

Reference