加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – 按ESC键时检测$mdDialog close

发布时间:2020-12-17 07:15:03 所属栏目:安全 来源:网络整理
导读:我有一个带输入字段的$mdDialog.在关闭$mdDialog之前,将保存输入字段的内容.因此,当用户按下“关闭”按钮时,将调用一个函数对数据执行某些操作并保存它们.但是,我无法在ESC上检测到$mdDialog的关闭.是否可以在$mdDialog控制器中使用ESC检测关闭事件? 这是示
我有一个带输入字段的$mdDialog.在关闭$mdDialog之前,将保存输入字段的内容.因此,当用户按下“关闭”按钮时,将调用一个函数对数据执行某些操作并保存它们.但是,我无法在ESC上检测到$mdDialog的关闭.是否可以在$mdDialog控制器中使用ESC检测关闭事件?

这是示例代码.
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>

解决方法

你应该使用promise api.

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

   }
);

但是使用外部代码的接收器应该与其他机制一起使用,例如通过提供范围.

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读