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

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

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

在它们中，您可以在需要的地方轻松应用自定义 css 规则。

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

Answer 2

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

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 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？

How to change style or add CSS in $mdDialog in AngularJs?

angularjs

material-design

angularjs-material