关于javascript：toastr不会出现在ui-router子状态中


toastr doesn't appear in ui-router child states

下面是我的父/子状态和呈现我的angular应用程序的index.html文件的示例。在子状态中没有toastr消息出现，不确定原因。该依赖关系按预期包含在每个控制器中。

config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
(function(){
'use strict'

var app = angular.module('core');

app.config(AppRouter);

AppRouter.$inject = ['$stateProvider', '$urlRouterProvider'];

function AppRouter($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('/home');
    $stateProvider
        .state('/', {
            templateUrl: 'app/components/home/home.html',
            controller: 'HomeController',
            controllerAs: 'vm',
            parent: 'app',
            authenticate: true,
            resolvePolicy: {when:'LAZY', async: 'WAIT'},
            resolve:{
                security:['$q', '$rootScope', 'privileges', 'routeErrors', function($q, $rootScope, privileges, routeErrors){
                    if($rootScope.isLoggedIn()){
                        return $q.resolve();
                    } else {
                        return $q.reject(routeErrors.NOT_LOGGED_IN);
                    }
                }]
            }                  
        })
        .state('app', {
            url:'',
            abstract: true,
            template: '',
            resolve:{
                privileges: ['privilegesService', function(privilegesService){
                    return privilegesService.getPrivileges()
                                            .then(privilegesService.privilegesData)
                                            .catch(privilegesService.getPrivilegesError);
                }],
                alarms: ['alarmsService', function(alarmsService){
                    return alarmsService.setAlarms();
                }],
                firmsData: ['chosenFirmService', function(chosenFirmService){
                    return chosenFirmService.getFirmsData();
                }],
                notifications: ['notificationsService', function(notificationsService){
                    notificationsService.loadNotificationData();
                    return notificationsService.setupGlobalAccess();
                }],
                releaseNotes: ['releaseNotesService', function(releaseNotesService){
                    return releaseNotesService.setupGlobalAccess();
                }],
                setIdle: ['idleService', function(idleService){
                    return idleService.setIdle();
                }]
            }
        })
        .state('home', {
            url: '/home',
            templateUrl: 'app/components/home/home.html',
            controller: 'HomeController',
            controllerAs: 'vm',
            parent: 'app',
            authenticate: true,
            resolvePolicy: {when:'LAZY', async: 'WAIT'},
            resolve:{
                security:['$q', '$rootScope', 'privileges', 'routeErrors', function($q, $rootScope, privileges, routeErrors){
                    if($rootScope.isLoggedIn()){
                        return $q.resolve();
                    } else {
                        return $q.reject(routeErrors.NOT_LOGGED_IN);
                    }
                }]
            }                  
        })
}

app.config(Toastr);

function Toastr(toastrConfig) {
    angular.extend(toastrConfig, {
        autoDismiss: true,
        containerId: 'toast-container',
        maxOpened: 0,
        newestOnTop: true,
        positionClass: 'toast-top-center',
        preventDuplicates: false,
        preventOpenDuplicates: true,
        target: 'body',
        timeOut: 5000
    });
};
})();

index.html

1
2
3
4
5
6
7
8
9
<body data-ng-cloak>
   
   
       
        {{scrollTo}}
   
   
   
</body>

示例控制器(这在'app'的每个子状态下发生)

1
2
3
4
5
6
7
8
EditFirmController.$injectParams = ['$filter', '$window', '$rootScope', 'toastr'];

function EditFirmController($filter, $window, $rootScope, toastr) {

        var editFirmFail = function(resp){
        resetDropDowns();
        toastr.error($rootScope.ResponseFailMessage(resp),"Update failed.");
    };

呈现的HTML

enter

相关讨论

当您将其配置为positionClass: 'toast-top-center',

应为：

1
2
3
<div id="toast-container"
     class="toast-top-center"
     style="pointer-events: auto;">

但是从您的示例(图像)中，您还有其他类别：parent-state a.e.

1
2
3
<div id="toast-container"
     class="parent-state"
     style="pointer-events: auto;">

toast-container id具有样式：

1
2
3
4
#toast-container {
    position: fixed;
    z-index: 999999;
}

所以它应该工作

如果看不到图像的含义，则以某种方式将类parent-state(假设您的自定义类)替换为toast-top-center。

1
2
3
4
5
.toast-top-center {
    top: 0;
    right: 0;
    width: 100%;
}

甚至根本没有加载。

相关讨论