web-dev-qa-db-ja.com

angular uiイベント後のモーダル

モーダルウィンドウが呼び出された後に関数を呼び出す方法はありますか（ボタンで発生したか、背景をクリックして発生したかは関係ありません）

var dialog, options;

options = {
  windowClass: "lightBox"
  templateUrl: "url to the template",
  controller: "some random controller",
  scope: $scope
});

$("body").css({
  'overflow': 'hidden'
});

dialog = $modal.open(options);

dialog.result.then(function() {
  $("body").css({
    'overflow': 'auto'
  });
});

モーダルウィンドウがresult.then promiseの関数を閉じるたびに実行されます。モーダルを手動で閉じたときに$ modalInstance.close（）を実行するだけです。しかし、私が背景をクリックすると、このメソッドは呼び出されません

どのように私はこれを行うことができますか？

javascriptjquerytwitter-bootstrapangularjsangular-ui
39
Safari

角度UIからモーダルダイアログを使用していると仮定します。しかし、詳細に入る前に、AngularJSのpromiseに関するドキュメントが少し必要です。すべてのthen関数が3つのパラメーターを受け入れることができることを知っておく必要があります。

then(successCallback, errorCallback, notifyCallback)
  • successCallbackは、promiseが解決されると実行されます。
  • errorCallbackは、promiseが拒否されたときに実行されます。
  • notifyCallbackは通知時に実行されます。

アンギュラーUIのモーダルの場合、背景をクリックするとプロミスが拒否されます。これを念頭に置いて、コードを次のように変更できます。

dialog.result.then(function () {
  alert('Modal success at:' + new Date());
}, function () {
  alert('Modal dismissed at: ' + new Date());
});

あなたは働くプランカーを見ることができます ここ

59
Nicolas ABRIC

Angular 1.2は、 finally(callback) のpromiseをサポートしています。

dialog.result.finally(function() {
    alert('clean up resources');
});

作業中のプランカーを確認してください こちら 。

20
Derek