選擇風格編程離子敬酒

Question

我有以下ionicToast到我的彈出：

onTap: function(e) { 
        var nombre = scope.data.nombre; 
        var telefono = scope.data.telefono; 
        if (nombre.length > 0 && telefono.toString().length > 0) { 
         scope.data.nombre = nombre; 
         scope.data.telefono = telefono; 
         return scope.data; 
        } else { 
         ionicToast.show('Debe completar todos los campos.', 'bottom', true, 2500); 
         e.preventDefault(); 
        } 
       } 

的麪包完美的作品。但我想區分敬酒是錯誤還是成功的信息。

現在的問題是：¿如何以編程方式更改吐司的風格？ 因爲有時我需要背景紅色（對於錯誤消息），有時我需要綠色（對於成功消息）。

我也沒有這個土司在我.HTML文件，所以我不能設置一個特定的風格

這是我的風格，我定義的：

.toast-container-error{ 
    background-color: red; 
} 

.toast-container-success{ 
    background-color: green; 
} 

謝謝你幫我！

// //編輯 使用toastr爲我定製的麪包，它沒有顯示在Android設備上

的index.html

<link href="bower_components/toastr/toastr.css" rel="stylesheet"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script> 
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" /> 

Agenda.service（這裏我想使用它）

agendaService.$inject = ['remoteDataService','$q', '$ionicPopup', '$rootScope', 'ionicDatePicker']; 

/* @ngInject */ 
function agendaService(remoteDataService,$q, $ionicPopup, $rootScope, ionicDatePicker){ 
    var agendaComplejo = []; 
    var service = { 
     obtenerAgenda: obtenerAgenda, 
     cargarNuevoTurno: cargarNuevoTurno, 
     abrirAgenda: abrirAgenda 
    }; 
    toastr.options = { 
      "closeButton": true, 
      "debug": true, 
      "newestOnTop": false, 
      "progressBar": false, 
      "positionClass": "toast-bottom-full-width", 
      "preventDuplicates": false, 
      "onclick": null, 
      "showDuration": "300", 
      "hideDuration": "1000", 
      "timeOut": "5000", 
      "extendedTimeOut": "1000", 
      "showEasing": "swing", 
      "hideEasing": "linear", 
      "showMethod": "fadeIn", 
      "hideMethod": "fadeOut" 
    } 
    return service; 

function cargarNuevoTurnoPopup() { 
     var scope = $rootScope.$new(); 
     scope.data = { 
      nombre: '', 
      telefono: '' 
     }; 
     return { 
      templateUrl: 'scripts/complejo/agenda/nuevo-turno.html', 
      title: "Nuevo Turno", 
      scope: scope, 
      buttons: [{ 
       text: 'Cancelar', 
       onTap: function(e) { 
        scope.data.canceled = true; 
        return scope.data; 
       } 
      }, { 
       text: '<b>Guardar</b>', 
       type: 'button-positive', 
       onTap: function(e) { 
        var nombre = scope.data.nombre; 
        var telefono = scope.data.telefono; 
        if (nombre.length > 0 && telefono.toString().length > 0) { 
         scope.data.nombre = nombre; 
         scope.data.telefono = telefono; 
         return scope.data; 
        } else { 
         toastr["error"]("Debe completar todos los campos.") 
         e.preventDefault(); 
        } 
       } 
      }] 
     }; 
    } 

另外，我生成以下命令APK：

ionic build android --debug 

Answer 1

這是可能的，但你必須在此改變組件的原始風格做到這一點。在我們的項目中，我們使用Toastr爲您提供顯示錯誤或信息的標準方法，並且可以更輕鬆地覆蓋。

把它列入你的項目只包括JS和CSS

<script src="toastr.js"></script> 
<link href="toastr.css" rel="stylesheet"/> 

然後該API允許你提出一個信息或錯誤

toastr.info('yourmessage') 
toastr.error('your message') 
toastr.success('your message') 

你可以找到一個演示在這裏： http://codeseven.github.io/toastr/demo.html