angularjsダイアログでCSSを適用できません

Question

私はモバイルアプリケーションを作成しています。ボタンをクリックするとダイアログウィンドウがポップアップします。私の問題は、このウィンドウが反応しなくて、CSSを変更できないということです。

ここでは、コードです：

Controller.js

.controller('jargonController', ['$scope','$mdDialog','$mdMedia',function ($scope, $mdDialog, $mdMedia){ 

$scope.status = ' '; 

    $scope.showTabwtr = function(ev) { 
    $mdDialog.show({ 
     controller: DialogController, 
     templateUrl: 'templates/jargon/wtr.tmpl.html', 
     parent: angular.element(document.body), 
     windowClass: 'center-modal', 
     targetEvent: ev, 
     clickOutsideToClose:true 
    }) 
     .then(function(answer) { 
      $scope.status = 'You said the information was "' + answer + '".'; 
     }, function() { 
      $scope.status = 'You cancelled the dialog.'; 
     }); 
    } 

Index.htmlと

<div class="col col-50" > 
    <img src="img/jargon/Image13.png" ng-click="showTabwtr($event)" style="width: 100%; height: auto"/> 
</div> 

テンプレート

は、

<div class="modall"> 
    <img style="max-width:200px; max-height:100px"src="img/description/Image17.png"/> 
</div> 

CSS

.modall { 

    margin: auto; 
    position: relative; 
    max-width: 200px; 
    max-height: 80px; 
    background: transparent; 
} 

Answer 1

$scope.showTabwtr = function(ev) { 
    $mdDialog.show({ 
     controller: DialogController, 
     templateUrl: 'templates/jargon/wtr.tmpl.html', 
     parent: angular.element(document.body), 
     windowClass: 'center-modal', 
     targetEvent: ev, 
     cssClass: 'your css name', 
     clickOutsideToClose:true 
    }) 

使用このcssClassプロパティを