5
입력 필드가있는 $ mdDialog가 있습니다. $ mdDialog를 닫기 전에 입력 필드의 내용이 저장됩니다. 따라서 사용자가 '닫기'버튼을 누르면 데이터에 대한 연산을 수행하고 저장하는 함수가 호출됩니다. 그러나 ESC에서 $ mdDialog를 닫을 수 없습니다. $ mdDialog 컨트롤러에서 ESC를 사용하여 closing 이벤트를 감지 할 수 있습니까?
다음은 샘플 코드입니다. 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>
$ mdDialog 자체의 컨트롤러에서 처리 할 수 없습니까? $ mdDialog가 초기화 된 장소에 책임을주지 않을 것입니다. 컨트롤러에서 함수가 필요합니다. –
모달에 범위를 제공하고 destroy - scope를 수신하려고 할 수 있습니다. $ on ('$ destroy') –