2016-09-06 6 views
5

私は入力フィールドを持つ$ mdDialogを持っています。 $ mdDialogを閉じる前に、入力フィールドの内容が保存されます。したがって、ユーザが「閉じる」ボタンを押すと、データに対して何らかの操作を実行し、それらを保存するための関数が呼び出される。しかし、ESCで$ mdDialogの終了を検出できませんでした。 $ mdDialogコントローラでESCで終了イベントを検出することは可能ですか?

ここにサンプルコードを示します。あなたは約束のAPIを使用する必要があります Codepen link

angular.module('MyApp', ['ngMaterial']) 
 

 
.controller('AppCtrl', function($scope, $mdDialog, $rootScope) { 
 
    //$rootScope is used only of this demo 
 
    $rootScope.draft = ' '; 
 

 
    $scope.showDialog = function(ev) { 
 
    var msgDialog = $mdDialog.show({ 
 
     controller: 'DemoDialogCtrl', 
 
     template: "<md-input-container><label>Text</label><input type='text' ng-model='myText' placeholder='Write text here.'></md-input-container><md-button ng-click='close()'>Close</md-button>", 
 
    }) 
 

 
    }; 
 

 

 
}); 
 

 
(function() { 
 
    angular 
 
    .module('MyApp') 
 
    .controller('DemoDialogCtrl', DemoDialogCtrl); 
 

 
    DemoDialogCtrl.$inject = ['$scope', '$rootScope', '$mdDialog']; 
 

 
    function DemoDialogCtrl($scope, $rootScope, $mdDialog) { 
 

 

 
    $scope.close = function() { 
 
     //$rootScope is used only of this demo 
 
     // In real code, there are some other operations 
 
     $rootScope.draft = $scope.myText; 
 

 
     $mdDialog.hide(); 
 
    } 
 

 
    } 
 
})();
<div ng-controller="AppCtrl" class="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak="" ng-app="MyApp"> 
 
    <div class="dialog-demo-content" layout="row" layout-wrap="" layout-margin="" layout-align="center"> 
 
    <md-button class="md-primary md-raised" ng-click="showDialog($event)"> 
 
     Open Dialog 
 
    </md-button> 
 
    <div id="status"> 
 
     <p>(Text written in $mdDialog text field must appear here when user closes the $mddialog. User can press close button or press ESC button. 
 
     </p> 
 
     <b layout="row" layout-align="center center" class="md-padding"> 
 
       Draft: {{draft}} 
 
      </b> 
 
    </div> 
 
    </div> 
 
</div>

答えて

2

$mdDialog.show().finally(
    function onModalClose(){ 

    } 
); 

しかし、外部コードを持つシンクは、スコープを指定するなど、他のメカニズムで使用する必要があります。

var modalScope = $rootScope.$new(true); 
$mdDialog.show({scope: modalScope}).finally(function(){ 
    $rootScope.draft = modalScope.myText; 
}); 
+0

これは$ mdDialog自体のコントローラで処理できませんか?私はむしろ$ mdDialogが開始された場所に責任を与えることはしません+コントローラからの関数が必要です –

+1

あなたはモーダルにスコープを提供し、destroy - scopeをリッスンしようとします$ on( '$ destroy') –

関連する問題