toastr不会出现在ui-router子状态中
Nea*_*alR 9 javascript angularjs toastr angular-ui-router
下面是我的父/子状态和呈现我的角度应用程序的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
当您将其配置为positionClass: 'toast-top-center',
它应该是：
<div id="toast-container"
class="toast-top-center"
style="pointer-events: auto;">
</div>
但是，从您的示例（图像）来看，您有其他类别：parent-stateae
<div id="toast-container"
class="parent-state"
style="pointer-events: auto;">
</div>
idtoast-container的样式：
#toast-container {
position: fixed;
z-index: 999999;
}
所以它应该有效
如果您没有看到图像意味着，类parent-state （假设您的自定义类）会以某种方式替换toast-top-center.
.toast-top-center {
top: 0;
right: 0;
width: 100%;
}
甚至根本没有加载。