【问题标题】:Call $mdDialog ( Angular Material ) Confirmation instead of Default Javascript调用 $mdDialog (Angular Material) 确认而不是默认 Javascript
【发布时间】:2016-07-16 11:00:11
【问题描述】:

脚本

if (true) {
    if(!confirm("Are you sure ?")) 
    {
     event.preventDefault();
     }
  }

如何调用 Angular Material 对话框而不是默认的 javascript 确认?类似的东西

function(event) {
      var confirm = $mdDialog.confirm()
            .title('Are you sure ?')
            .targetEvent(event)
            .ok('ok')
            .cancel('cancel');

        $mdDialog.show(!confirm).then(function() {
            event.preventDefault();
        });
    };

【问题讨论】:

  • confirm() 对话框几乎总是异步的,需要回调而不是返回值。

标签: javascript angularjs dialog material-design angular-material


【解决方案1】:

检查这支笔。只需在ng-click 中传递$event 并使用材料库提供的$mdDialog 服务即可打开警报对话框。 http://codepen.io/next1/pen/KzvwXq

HTML 文件

<md-button class="md-primary md-raised" ng-click="showConfirm($event)">
  Confirm Dialog
</md-button>

JS 文件

$scope.showConfirm = function(ev) {
var confirm = $mdDialog.confirm()
      .title('Are you sure?')
      .textContent('Are you really sure?')
      .ariaLabel('Lucky day')
      .targetEvent(ev)
      .ok('Yes')
      .cancel('No');

$mdDialog.show(confirm).then(function() {
  $scope.status = 'Yes';
}, function() {
  $scope.status = 'No';
});

【讨论】:

  • 谢谢,但这不适用于按钮点击。相反,我将它用于表单 $dirty check
  • 您可以查看您的表单集合以了解$dirty 中的任何更改,并调用该函数打开对话框。再次检查那支笔。我做了一些改变。
  • 更新了您的答案,它确实按预期显示了警报。但是,在用户确认之前,它不会阻止event.preventDefault();。谢谢
猜你喜欢
  • 2022-01-19
  • 2018-05-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-07-27
  • 1970-01-01
相关资源
最近更新 更多