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

【问题标题】：toastr doesn't appear in ui-router child statestoastr 没有出现在 ui-router 子状态中
【发布时间】：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 中重现它吗？

标签： javascript angularjs angular-ui-router toastr

【解决方案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 很高兴听到。