gpt4 book ai didi

javascript - toastr 没有出现在 ui-router 子状态中

转载 作者:数据小太阳 更新时间:2023-10-29 03:55:27 25 4
gpt4 key购买 nike

下面是我的父/子状态和呈现我的 Angular 应用程序的 index.html 文件的示例。子状态中没有出现 toastr 消息,不知道为什么。该依赖项按预期包含在每个 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>

示例 Controller (这发生在“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

enter image description here

最佳答案

当你将其配置为 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 id 具有以下样式:

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

所以它应该可以工作

如果你没有看到图像意味着,类 parent-state (假设你的自定义类) 替换 toast-top-center.

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

甚至根本没有加载。

关于javascript - toastr 没有出现在 ui-router 子状态中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47359174/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com