toastr 没有出现在 ui-router 子状态中
toastr doesn't appear in ui-router child states
下面是我的 parent/child 状态和呈现我的 angular 应用程序的 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>
然而,从你的例子(图片)来看,你还有其他 class: parent-state
a.e.
<div id="toast-container"
class="parent-state"
style="pointer-events: auto;">
</div>
toast-container
id 具有样式:
#toast-container {
position: fixed;
z-index: 999999;
}
所以它应该可以工作
如果你看不到图像意味着,不知何故 class parent-state
(假设你的自定义 class) 替换 toast-top-center
.
.toast-top-center {
top: 0;
right: 0;
width: 100%;
}
甚至根本没有加载。
下面是我的 parent/child 状态和呈现我的 angular 应用程序的 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>
然而,从你的例子(图片)来看,你还有其他 class: parent-state
a.e.
<div id="toast-container"
class="parent-state"
style="pointer-events: auto;">
</div>
toast-container
id 具有样式:
#toast-container {
position: fixed;
z-index: 999999;
}
所以它应该可以工作
如果你看不到图像意味着,不知何故 class parent-state
(假设你的自定义 class) 替换 toast-top-center
.
.toast-top-center {
top: 0;
right: 0;
width: 100%;
}
甚至根本没有加载。