toastr 没有出现在 ui-router 子状态中
Posted
技术标签:
【中文标题】toastr 没有出现在 ui-router 子状态中【英文标题】：toastr doesn't appear in ui-router child states 【发布时间】：2018-05-01 17:36:35 【问题描述】：下面是我的父/子状态和呈现我的角度应用程序的 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
【问题讨论】：
您是否将 toastr 库作为 Angular 应用程序的依赖项？类似angular.module('app', ['toastr'])
是的，包括在内。 toastr 消息出现在 html 中，但是它们根本不可见。
你能在 Plunker/Fiddle/Codepen 中重现它吗？
【参考方案1】：
当你配置为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%;
甚至根本没有加载。
【讨论】：
抱歉，parent-state 类是调试尝试的一部分（我已经替换了那个截图）。 toast-top-center 类按预期呈现。是否需要将 css 直接加载到父状态以便子级可以访问它，或者嵌套以某种方式妨碍了 css 的应用？
@NealR 在调试控制台中你应该看到toast-top-center 的css。如果你没有看到它，意味着你没有加载 css 源
就是这样，我的gulpfile.js 中有一个错误阻止.css 文件加载facepalm
@NealR 很高兴听到。以上是关于toastr 没有出现在 ui-router 子状态中的主要内容，如果未能解决你的问题，请参考以下文章