如何在$ mdToast角度材質中一起使用自定義主題和模板

Question

我有以下css應用於mdToast以獲得不同的響應，例如SUCCESS，ERROR，INFO，WARNING。

md-toast.md-error-toast-theme div.md-toast-content{
    color: white !important;
    background-color: red !important;
}

md-toast.md-success-toast-theme div.md-toast-content{
    color: white !important;
    background-color: green !important;
}

我想把這個主題css應用到mdToast下面

$mdToast.show({
                templateUrl:'views/toast-template.html',
                controller:'ToastCtl',
                hideDelay:5000,
                controllerAs: 'toast',
                bindToController: true,
                locals:{message:message,type:type}
            });

我能夠成功使用主題或模板。 但是，我無法一起使用模板和主題。

Answer 1

根據使用主題的文檔似乎僅適用於$mdToast.simple()

它不能作為$mdToast.show(optionsOrPreset)的選項。 不知道為什么。 但是，可以使用toastClass選項更改toast。 這是一個例子 - CodePen

標記

<div ng-controller="AppCtrl" class="inset toastdemoCustomUsage" ng-cloak="" style="height:300px; padding: 25px;" ng-app="MyApp">
  <md-button ng-click="showCustomToast()" class="md-raised" style="padding-left: 10px;padding-right: 10px;">
    Show Custom Toast
  </md-button>

  <script type="text/ng-template" id="toast-template.html">
    <md-toast>
      <span class="md-toast-text" flex>{{data.message}}</span>
      <md-button ng-click="closeToast()">Close</md-button>
    </md-toast>
  </script>
</div>

JS

(function() {
  angular
    .module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
    .controller('AppCtrl', function($scope, $mdToast) {

    $scope.showCustomToast = function() {
      var data = {type: "SUCCESS", message: "Well done!"};
      var toastClass;
      switch (data.type) {
        case "SUCCESS":
          toastClass = "success";
          break;
        case "ERROR":
          toastClass = "error";
          break;
        case "INFO":
          toastClass = "info";
          break;
        case "WARNING":
          toastClass = "warning";
          break;
      };

      $mdToast.show({
          hideDelay   : 3000,
          position    : 'top right',
          controller  : 'ToastCtrl',
          templateUrl : 'toast-template.html',
          locals: {
            data: data
          },
          toastClass: toastClass
        });
      };
    })
    .controller('ToastCtrl', function($scope, $mdToast, $mdDialog, data) {
      $scope.data = data;
      $scope.closeToast = function() {
        if (isDlgOpen) return;
        $mdToast
          .hide()
          .then(function() {
            isDlgOpen = false;
          });
      };
    });
})();

CSS

.success .md-toast-content  {
  background: green;
}
.error .md-toast-content  {
  background: red;
}
.info .md-toast-content  {
  background: orange;
}
.warning .md-toast-content  {
  background: purple;
}