toastr不会出现在ui-router子状态中

Question

下面是我的父/子状态和呈现我的角度应用程序的index.html文件的示例。 没有toastr消息出现在子状态，不知道为什么。 依赖关系包含在每个控制器中。

config.js

(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: '<div ui-view class="slide-animation"></div>',
            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

<body data-ng-cloak>
    <div ng-include="'app/shared/partials/navbar.html'"></div>
    <div class="slide-animation-container">
        <div ui-view id="ng-view" class="slide-animation"></div>
        {{scrollTo}}
    </div>
    <div ng-include="'app/shared/partials/footer.html'"></div>
    <div ng-include="'app/shared/partials/loading.html'"></div>
</body>

样本控制器（这种情况发生在'app'的每个子状态）

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

Answer 1

当你将它配置为positionClass: 'toast-top-center',

它应该是：

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

但是从您的示例（图像）中您可以看到其他类： parent-state ae

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

toast-container id具有以下样式：

#toast-container {
    position: fixed;
    z-index: 999999;
}

所以它应该工作

如果你没有看到图像意味着，某种类的parent-state （假设你的自定义类）取代了toast-top-center 。

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

甚至根本没有加载。

toastr不会出现在ui-router子状态中

问题描述

1 个解决方案

解决方案1
3 已采纳 2017-11-20 06:11:20

toastr不会出现在ui-router子状态中

问题描述

1 个解决方案

解决方案1 3 已采纳 2017-11-20 06:11:20

解决方案1
3 已采纳 2017-11-20 06:11:20