Question

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

我的目的是创建一个遍布页面的toastr和according to the documentation positionClass: 'toast-top-full-width'，toastr.success('Hello world!', 'Toastr fun!', { positionClass: 'toast-top-full-width' });就可以了。

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

查看插件css还可以验证声明。

for

但不知何故，代码不起作用。我的代码怎么了？
普兰克：http://plnkr.co/edit/2O6hjk5vnMUWWULNK9hs?p=preview

Answer 1

您需要在angular config中配置toast。

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

这样，你所有吐司的容器都是全宽的，然后当你打电话给吐司时，你可以把他的大小设置为全宽。

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

2 个答案: