Menu
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
562
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.
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
