Comment puis-je changer la couleur du Toast dépend du type de message dans le matériau angulaire $mdToast?

il est plus facile de spécifier un thème:

$mdToast.simple().content("some test").theme("success-toast")

et dans votre CSS:

md-toast.md-success-toast-theme {
    background-color: green;
    ...
}

vous pouvez incorporer votre type de message pour sélectionner dynamiquement un thème.

mise à Jour : Comme L'a souligné Charlie Ng, pour éviter les avertissements concernant l'utilisation d'un thème personnalisé non enregistré, enregistrez-le dans votre module en utilisant le fournisseur de thème: $mdThemingProvider.theme("success-toast")

Une autre mise à jour : Il y a eu un breaking change créé le 2 décembre 2015 (v1.0.0+). Vous devez maintenant spécifier:

md-toast.md-success-toast-theme {
    .md-toast-content {
        background-color: green;
        ...
    }
}

enregistrer les thèmes:

$mdThemingProvider.theme("success-toast");
$mdThemingProvider.theme("error-toast");

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

utiliser:

$mdToast.show(
    $mdToast.simple()
        .content(message)
        .hideDelay(2000)
        .position('bottom right')
        .theme(type + "-toast")
);

vous pouvez voir sur ce lien que vous ne pouvez pas changer la couleur de fond de l'élément, il sera toujours fixé:

https://github.com/angular/material/blob/master/src/components/toast/toast-theme.scss

c'est parce que les directives de conception des matériaux pour les Toasts indiquent que le fond restera toujours le même:

https://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-specs

noter l'article background sur la liste Specs .

rien n'est dit sur la couleur du texte dans chaque situation, il est sous-entendu qu'il suit le backgroundPalette , sur la rotation '50', déclaré sur ce CSS sur le lien GitHub.

La façon de distinguer un warn toast, ou d'un accent - ted one, par défaut, appelant un action toast , chacun avec son bouton d'action utilisant la classe appropriée ( md-warn ou 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'
});

le toast lui-même, que sa forme default signifie un rapport d'action, avec succès implicite. Si elle a besoin de plus encore plus d'attention, forcer sa fermeture en mettant en place un bouton d'action ajouter des actions comme 'Rety', 'Report a problem',' Details', qui peuvent être utilisés pour attraper ce clic et enregistrer quelques informations techniques, etc... les exemples varient de ce dont vous avez besoin.

encore un pas vers la réponse de rlay3.

Angulaire de Matériel à la 0.7.1 ajouté avertissement pour non thèmes. https://github.com/angular/material/blob/master/CHANGELOG.md#071--2015-01-30

si le thème n'est pas enregistré, chaque fois que le toast apparaît, vous recevrez un message d'avertissement dans la console comme, par exemple:

attempted to use unregistered theme 'custom-toast'
angular.js:12416 Attempted to use unregistered theme 'custom-toast'. 
Register it with $mdThemingProvider.theme().

Pour se débarrasser de l'avertissement, vous aurez besoin pour configurer le thème 'custom-toast' dans votre application angulaire:

angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('custom-toast')
});

et l'utiliser comme:

$mdToast.simple().content("some test").theme("custom-toast");

, les références: https://material.angularjs.org/latest/#/Theming/04_multiple_themes

vous avez demandé à propos de l'utilisation de l'appel toast simple. Pourriez-vous essayer un toast personnalisé show comme la démo et ajouter des classes au modèle?

JS

$mdToast.show(
  controller: 'ToastCtrl',
  templateUrl: 'views/shared/toast.html',
  hideDelay: 6000,
  position: $scope.getToastPosition()
)

modèle

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

CONTROLLER (COFFEE)

'use strict'

###*
 # @ngdoc function
 # @name angularApp.controller:ToastCtrl
 # @description
 # # ToastCtrl
 # Controller of the angularApp
###
angular.module('angularApp')
  .controller 'ToastCtrl', ($scope) ->
    $scope.closeToast = ()->
      $mdToast.hide()

juste pour donner une autre option, $mdToast permet de définir toast presets que vous pouvez facilement instancier de cette façon, bien que je me bats pour comprendre comment changer le contenu du texte, une idée?

$mdToast.show(
  $mdToast.error()
);

les presets sont définis comme expliqué sur 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
    };
  }
});

j'ai d'abord préféré la solution mais je n'aime pas mettre en place un thème dans le fournisseur de thème juste pour un toast. Alors que pensez-vous de cette solution:

JS (Café)

   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')
      )

puis HTML (JADE)

md-toast(ng-class="class")
  span(flex) {{message}}
  md-button.md-action(ng-click="closeToast()") {{buttonLabel}}

j'ai essayé d'utiliser l'option locals pour passer les variables au contrôleur, mais pour une raison quelconque, elles ne sont pas injectées.( https://material.angularjs.org/latest/#/api/material.components.toast/service/ $mdToast consulter la liste des options sous show fonction)

puis le dernier CSS (STYLUS)

md-toast.success
  background-color    green

md-toast.error
  background-color    red

résumé: il y a sur le modèle dans ce cas que vous pouvez donner des placeholders personnalisés que vous préférez dans votre controller. Cette solution fonctionne pour moi.

vous pouvez le faire avec l'usine et quelques 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)
      );
    }
  }
}());

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