如何改变Toast的颜色取决于Angular材质$ mdToast的消息types？
当使用$mdToast.simple().content("some test")它显示黑色的敬酒。 我怎样才能改变颜色为红色，黄色等等，取决于错误信息的types，如错误，警告和成功。
类似的问题是这样的 。
编辑：
为了正确的实施，请使用下面的rlay3s 解决scheme :)！
过时的：
我有jhblacklocks解决scheme显示自定义文本的问题，所以我决定这样做，使用'模板'：
var displayToast = function(type, msg) { $mdToast.show({ template: '<md-toast class="md-toast ' + type +'">' + msg + '</md-toast>', hideDelay: 6000, position: 'bottom right' }); };
我也在我的.css文件中添加了不同的types：
.md-toast.error { background-color: red; } .md-toast.success { background-color: green; }
不知道这是否是最漂亮的方法，但我不需要每个对话框types的模板文件，并显示自定义文本是很容易的。
指定一个主题有一个更简单的方法：
$mdToast.simple().content("some test").theme("success-toast")
并在你的CSS：
md-toast.md-success-toast-theme { background-color: green; ... }
你可以合并你的消息types来dynamicselect一个主题。
更新 ：正如Charlie Ng指出的那样，为了避免使用未注册的自定义主题的警告，在你的模块中使用主题提供者注册它： $mdThemingProvider.theme("success-toast")
另一个更新 ：2015年12月2日创build了一个突破性的更改 （v1.0.0 +）。 您现在需要指定：
md-toast.md-success-toast-theme { .md-toast-content { background-color: green; ... } }
你可以看到这个链接，你不能改变元素的背景颜色，它将永远是固定的：
https://github.com/angular/material/blob/master/src/components/toast/toast-theme.scss
这是因为“面包材料devise指南”指出背景总是保持不变：
https://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-specs
请注意规格列表中的background项目。
关于每种情况下的文本颜色都没有提到，这意味着它遵循backgroundPalette ，在GitHub链接上的CSS上声明的'50'色调旋转。
用默认的方式来区分warn敬酒或者accent敬酒，调用一个action toast ，每个动作的动作button使用相应的类（ md-warn或者md-accent ）。
$mdToast.show({ template: '<md-toast>\ {{ toast.content }}\ <md-button ng-click="toast.resolve()" class="md-warn">\ Ok\ </md-button>\ </md-toast>', controller: [function () { this.content = 'Toast Content'; }], controllerAs: 'toast' });
敬酒本身，其defaultforms意味着一个行动报告，成功隐含着。 如果需要更多关注，可以通过设置一个动作button来加强closures，添加“重试”，“报告问题”，“细节”等操作，可以用来捕获点击并logging一些技术信息等。 ..例子不同，你需要什么。
注册主题：
$mdThemingProvider.theme("success-toast"); $mdThemingProvider.theme("error-toast");
添加CSS：
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; }
使用：
$mdToast.show( $mdToast.simple() .content(message) .hideDelay(2000) .position('bottom right') .theme(type + "-toast") );
再来一步rlay3的答案。
0.7.1处的angular度材料对未注册的主题添加了警告。 https://github.com/angular/material/blob/master/CHANGELOG.md#071–2015-01-30
如果主题没有注册，每次吐司出现，您将在控制台中收到警告消息，例如：
attempted to use unregistered theme 'custom-toast' angular.js:12416 Attempted to use unregistered theme 'custom-toast'. Register it with $mdThemingProvider.theme().
为了摆脱这个警告，你需要在你的angular app中configuration主题'custom-toast'：
angular.module('myApp', ['ngMaterial']) .config(function($mdThemingProvider) { $mdThemingProvider.theme('custom-toast') });
并使用它像：
$mdToast.simple().content("some test").theme("custom-toast");
引用： https ： //material.angularjs.org/latest/#/Theming/04_multiple_themes
你曾问过如何使用简单的吐司电话。 你介意尝试一个像演示一样的自定义的吐司表演，并添加类到模板？
JS
$mdToast.show( controller: 'ToastCtrl', templateUrl: 'views/shared/toast.html', hideDelay: 6000, position: $scope.getToastPosition() )
模板
<md-toast class="flash"> <span flex>Custom toast!</span> <md-button ng-click="closeToast()"> Close </md-button> </md-toast>
CSS
md-toast.flash { background-color: red; color: white; }
控制器（咖啡）
'use strict' ###* # @ngdoc function # @name angularApp.controller:ToastCtrl # @description # # ToastCtrl # Controller of the angularApp ### angular.module('angularApp') .controller 'ToastCtrl', ($scope) -> $scope.closeToast = ()-> $mdToast.hide()
只是为了给出另一种select， $mdToast允许定义吐司预设 ，你可以很容易地用这种方式实例化，虽然我很努力去理解如何改变文本内容，任何想法？
$mdToast.show( $mdToast.error() );
预设定义如https://material.angularjs.org/latest/api/service/ $ mdToast所述：
$mdToastProvider.addPreset('error', { options: function() { return { template: '<md-toast>' + '<div class="md-toast-content">' + '</div>' + '</md-toast>', position: 'top left', hideDelay: 2000, toastClass: 'toast-error', controllerAs: 'toast', bindToController: true }; } });
我首先赞成这个解决scheme，但是我不喜欢在主题提供者中为敬酒设置一个主题。 那么这个解决scheme如何呢？
JS（咖啡）
if error message = '' if error.reason is 'Incorrect password' message = 'Email and password combination is incorrect' if error.reason is 'User not found' message = 'No account found with this email address' $mdToast.show( templateUrl: 'client/modules/toasts/toastError.html' hideDelay: 3000 controller: ( $scope ) -> $scope.message = message $scope.class = 'error' $scope.buttonLabel = 'close' $scope.closeToast = -> $mdToast.hide() ).then( ( result ) -> if result is 'ok' console.log('do action') )
然后HTML（JADE）
md-toast(ng-class="class") span(flex) {{message}} md-button.md-action(ng-click="closeToast()") {{buttonLabel}}
我试图使用locals选项传递给控制器的variables，但由于某种原因，他们没有注入。（ https://material.angularjs.org/latest/#/api/material.components.toast/service/ $ mdToast查看show function下的选项列表）
然后是CSS（STYLUS）
md-toast.success background-color green md-toast.error background-color red
总结：在这种情况下，你可以给你的控制器预先填写自定义占位符。 这个解决scheme适用于我。
你可以用工厂和一些CSS来做到这一点。
(function () { 'use strict'; angular .module('app.core') .factory('ToastService', ToastService); /** @ngInject */ function ToastService($mdToast) { var service = { error: error, success: success, info : info }; return service; ////////// function success(text) { $mdToast.show( $mdToast.simple() .toastClass("toast-success") .textContent(text) ); } function info(text) { $mdToast.show( $mdToast.simple() .toastClass("toast-info") .textContent(text) ); } function error(text) { $mdToast.show( $mdToast.simple() .toastClass("toast-error") .textContent(text) ); } } }());
和css。
.toast-error .md-toast-content{ background-color: rgb(102,187,106) !important; } .toast-info .md-toast-content{ background-color: rgb(41,182,246) !important; } .toast-error .md-toast-content{ background-color: rgb(239,83,80) !important; }
