angularjs - 为什么 angular-toastr 不接受覆盖的 postionClass。？

Question

使用的插件：https ://github.com/Foxandxss/angular-toastr

我的意图是创建一个跨越整个页面的 toastr，并且根据文档，positionClass: 'toast-top-full-width'可以解决问题。

toastr.success('Hello world!', 'Toastr fun!', {
    positionClass: 'toast-top-full-width'
});

浏览插件 css 也可以验证该声明。

.toast-top-full-width {
    top: 0;
    right: 0;
    width: 100%;
}

但不知何故，代码不起作用。我的代码有什么问题？
Plunkr：http ://plnkr.co/edit/2O6hjk5vnMUWWULNK9hs?p=preview

Answer 1

您需要在角度配置中配置吐司。

var app = angular.module('app', ['ngAnimate', 'toastr']);

 app.config(function(toastrConfig) {
   angular.extend(toastrConfig, {
    positionClass: 'toast-top-full-width'
   });
 });

 app.controller('toastr-demo', function($scope, toastr) {
    toastr.success('Hello world!', 'Toastr fun!');
 });

Plunker：http ://plnkr.co/edit/pdstz2WkJqdi1Qw0R1pX?p=preview

Answer 2

您的问题是toastContainer不够大，您应该添加如下配置：

app.config(function(toastrConfig) {
  angular.extend(toastrConfig, {
    positionClass: 'toast-top-full-width'
  });
});

这样，所有 toast 的容器将是全宽的，然后当您调用 toast 时，您可以将他的大小设置为全宽。