javascript - 如何在 Angular Material 的$mdToast中一起使用自定义主题和模板

Question

我有以下 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}
            });

我能够成功使用主题或模板。但是，我无法同时使用模板和主题。

Answer 1

根据documentation使用主题似乎只适用于 $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;
}