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的样式？ 因为有时我需要背景红色（用于错误信息），有时我需要绿色（用于成功消息）。

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

这是我定义的风格：

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

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

感谢您的帮助！

// // EDIT 使用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

以编程方式改变风格离子吐司

1 个答案: