javascript - 以编程方式更改样式 ionic toast

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

toast 效果很好。但我想区分 toast 是错误消息还是成功消息。

问题是:¿如何以编程方式更改 toast 的样式？ 因为有时我需要背景红色(用于错误消息)，有时我需要背景为绿色(用于成功消息)。

此外，我的 .HTML 文件中没有此 toast，因此无法设置特定样式

这是我定义的风格:

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

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

谢谢你帮助我!

//编辑// 将 toastr 用于我的自定义 toast，它未在 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