Angularjs toastr：在右下方显示吐司

Question

我是使用bind的新手。我的问题是如何覆盖positionClass并在右下角显示toast。

我知道你可以使用options在html中执行此操作，但我不想在我的html中使用它。我需要管理20个页面。添加每个页面是不对的。所以我使用toast作为service，我可以在每个crud的控制器中使用它。

     (function() {
        "use strict";

        angular.module("app").factory('ToastService', function($mdToast, toastr) {


            //http://codeseven.github.io/toastr/demo.html
            toastr.options = {
                "closeButton": false,
                "debug": false,
                "newestOnTop": false,
                "progressBar": false,
                "positionClass": "toast-bottom-right",
                "preventDuplicates": false,
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "6000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            };

      return {

                info: function(content, title) {
                    if (!content) {
                        return false;
                    }

                    return toastr.info(content, title, {
                        timeOut: toastr.options.timeOut
                    });
                },


                success: function(content, title) {
                    if (!content) {
                        return false;
                    }

                    return toastr.success(content, title, { timeOut: toastr.options.timeOut});
                },

        error: function(content, title, time) {
            if (!content) {
                return false;
            }
            return toastr.error(content, title, {
                timeOut: time
            });
            //
        },

        };
    });
})();

在控制器中，我就这样称呼它。

  ToastService.error('Connection interrupted!', 'Server Error');

但是我想在右下方显示它，而不是右上角的默认位置。

谢谢！

Answer 1

toastr从右下方弹出，通过以下选项设置：

config.js（cref：John Papa -Pluralsight）

(function () {
    var app = angular.module('app');
    // Configure Toastr
    toastr.options.timeOut = 4000;
    toastr.options.positionClass = 'toast-bottom-right';
    toastr.options.showMethod = 'slideDown';
    toastr.options.hideMethod = 'slideUp';
    var config = {
        version: '1.1.0',
        ...
    };
    app.value('config', config);
})();

你有CSS问题吗？