toastr doesn't appear in ui-router child states

Question

Below is an example of my parent/child states and the index.html file that renders my angular app. No toastr messages appear in the child states, not sure why. The dependency is included as expected in each controller.

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>

Sample controller (this happens in every child state of '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.");
    };

Rendered HTML

Did you put the toastr library as a dependency of your angular app? something like `angular.module('app', ['toastr'])` — MarkoCen, Nov 17 '17 at 21:35
Yes, it's included. The toastr messages appear in the html, however they're simply not visible. — NealR, Nov 17 '17 at 21:57

Maxim Shoustin · Accepted Answer · 2017-11-26T08:57:22.947

3

When you configure it as positionClass: 'toast-top-center',

It should be:

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

However from your example (the image) you have other class: parent-state a.e.

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

The toast-container id has style:

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

So it should work

If you don't see the image means, somehow class parent-state (suppose your custom class) replaces toast-top-center.

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

or even didn't load at all.

edited Nov 26 '17 at 08:57

answered Nov 20 '17 at 06:11

Maxim Shoustin

77,483
27
203
225

Sorry, that `parent-state` class was part of an attempt at debugging (I've replaced that screenshot). The `toast-top-center` class renders as expected. Could it be that the css either needs to be loaded into the parent state directly so it can be accessed by the children, or the nesting is somehow getting in the way of the css being applied? – NealR Nov 20 '17 at 14:19
@NealR in debug console you should see the css of `toast-top-center`. If you don't see it, means you didn't load css sources – Maxim Shoustin Nov 20 '17 at 14:28
That was it, there was a bug in my `gulpfile.js` preventing the .css file from loading *facepalm* – NealR Nov 20 '17 at 14:54
@NealR glad to hear. – Maxim Shoustin Nov 20 '17 at 16:59

toastr doesn't appear in ui-router child states

1 Answers1