AngularJs의 $ mdDialog에서 스타일을 변경하거나 CSS를 추가하는 방법은 무엇입니까?

Question

모달을 보여주기 위해 아래 코드를 사용했습니다. 하지만 $ mdDialog의 기본 스타일을 변경하고 싶습니다. 이 일을 어떻게 달성하는지 말해주십시오.

$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 규칙을 easly 적용 할 수 있습니다.

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(() => {

경우