如何在角度材料的 $mdToast 中一起使用自定义主题和模板答案

【问题标题】：How to use custom theme and template together in $mdToast of angular material如何在角度材料的 $mdToast 中一起使用自定义主题和模板
【发布时间】：2017-01-19 23:51:33
【问题描述】：

我有以下 css 可以向mdToast 申请不同的回复例如成功、错误、信息、警告。

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}
            });

我可以成功使用主题或模板。但是，我不能同时使用模板和主题。

【问题讨论】：

标签： javascript css angular-material angular-material2

【解决方案1】：

根据documentation 使用的主题似乎仅适用于$mdToast.simple()

它不适用于$mdToast.show(optionsOrPreset)。不知道为什么。但是，可以使用toastClass 选项来更改吐司。这是一个例子 - 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>

(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;
}

【讨论】：