Question

我使用下面的代码显示对话框，但我想更改对话框的默认样式。

这是我的代码：

$scope.LocationRejectModal = function (msg) {
  var PersonName= msg.from.local;
  var confirm = $mdDialog.confirm()
    .title('Location')
    .textContent(PersonName+' has Rejected Location sharing Request.')
    .targetEvent(event)
    .ok('Ok')
  $mdDialog.show(confirm).then(function() {
      //some code
  }, function() {
      //some code   
    });
  };

如何做到这一点？

Answer 1

我有类似的情况，我想添加自定义按钮样式而不是默认样式，因为很难看到。

this.$rootScope.isErrorDialogOpen = true;
var confirm = this.$mdDialog.confirm({
  onComplete: function afterShowAnimation() {
    var $dialog = angular.element(document.querySelector('md-dialog'));
    var $actionsSection = $dialog.find('md-dialog-actions');
    var $cancelButton = $actionsSection.children()[0];
    var $confirmButton = $actionsSection.children()[1];
    angular.element($confirmButton).addClass('md-raised md-accent');
    angular.element($cancelButton).addClass('md-raised');
  }
})
  .title('Session Timeout')
  .textContent('Would you like to stay logged into the application?')
  .ok('Yes')
  .cancel('No');
this.$mdDialog.show(confirm).then(() => {
  // Your code goes here
}, () => {
  // Your code goes here
}

Answer 2

您无法将自定义样式应用于预定义的对话框，例如Alert和Confirm。如果您必须使用自定义css规则，则必须实施Custom dialogs或Pre-rendered dialog。在第一种方式中，对话框内容仅在必须时才会呈现，例如当您打开对话框本身时。在第二种方式（使用预渲染对话框），对话框的内容将与页面一起呈现。它将默认隐藏，只有在按下按钮时才显示它。

在这两种情况下，您可以在需要的地方轻松应用自定义CSS规则。

在documentation中，您可以找到更多信息。

Answer 3

您还可以将属性添加到md-dialog-actions button中，以进行如下所示的独特样式

    function showConfirmDialogBox(evt) {
       var confirm = $mdDialog.confirm({
           onComplete: function runAfterAnimation() {
                var mdDialogActions = angular.element(document.getElementsByTagName('md-dialog-actions').children();
                angular.element(mdDialogActions[0]).attr('id', 'customConcelButton'); // for the md-cancel-button
                angular.element(mdDialogActions[1]).attr('id', 'customConfirmButton'); // for the md-confirm-button
           }
    })
    .title('This is the title of dialog')
    .textContent('This is the text content of the dialog')
    .ariaLabel('Attention')
    .targetEvent(evt)
    .ok('Accept')
    .cancel('Reject');
    $mdDialog.show(confirm).then(function() {
     // code
    }, function() {
    // code
    });
    }

Answer 4

为时已晚，但您可以更改模板：$ mdDialog.confirm（）._ options.template 使用ng-click =“ dialog.hide（）”进行确定按钮，而ng-click =“ dialog.abort（）进行取消。

示例：

        var confirm = $mdDialog.confirm()

        confirm._options.template = '<div id="modal-gestion">' +
            '<div id="modal-gestion-title">' +
            '<h3>'+titulo+'</h3>' +
            '</div>' +
            '<div id="modal-gestion-body">' +
            '<p>¿Desea eliminar la ubicaión?</p>' +
            '</div>' +
            '<div id="modal-gestion-buttons">' +
            '<md-button class="btn btn-info" ng-click="dialog.hide()" id="modal-gestion-buttonSi">Eliminar</md-button>' +
            '<md-button class="btn btn-danger" ng-click="dialog.abort()" id="modal-gestion-buttonNo">Cancelar</md-button>' +
            '</div>' +
            '</div>'


        $mdDialog.show(confirm).then(function () {
              // code            }), function () {

        });   // code

如何在AngularJs的$ mdDialog中更改样式或添加CSS？

4 个答案: