Toastr не появляется в дочерних состояниях ui-router

Ниже приведен пример моих родительских/дочерних состояний и файла index.html, который отображает мое приложение angular. В дочерних состояниях не появляются сообщения 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>

Контроллер образца (это происходит в каждом дочернем состоянии приложения)

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

введите описание изображения здесь

Ответ 1

Когда вы настроите его как positionClass: 'toast-top-center',

Это должно быть:

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

Однако из вашего примера (изображения) у вас есть другой класс: parent-state a.e.

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

Идентификатор toast-container имеет стиль:

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

Поэтому он должен работать

Если вы не видите изображение, значит, класс parent-state (предположим, что ваш пользовательский класс) заменяет toast-top-center.

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

или даже не загружался вообще.