toastrはui-routerの子ステートには表示されません

以下は私の角型アプリケーションをレンダリングする親子ステートとindex.htmlファイルの例です。子どもの状態にはメッセージが表示されますが、理由は不明です。toastr依存関係は、各コントローラに期待どおりに含まれています。toastrはui-routerの子ステートには表示されません

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>

サンプルコントローラ（これは 'アプリ' のすべての子状態で起こる）

EditFirmController.$injectParams = ['$filter', '$window', '$rootScope', 'toastr']; 

function EditFirmController($filter, $window, $rootScope, toastr) { 

     var editFirmFail = function(resp){ 
     resetDropDowns(); 
     toastr.error($rootScope.ResponseFailMessage(resp), "Update failed."); 
    };

あなたはpositionClass: 'toast-top-center',

として設定レンダリングされたHTML

出典

2017-11-17 NealR

あなたの角型アプリケーションの依存関係としてtoastrライブラリを配置しましたか？ 'angular.module（ 'app'、['toastr']）' – MarkoCen

はい、これは含まれています。トーストメッセージはhtmlに表示されますが、表示されません。 – NealR

Plunker/Fiddle/Codepenで再現できますか？ –

それはする必要があります：parent-state：あなたの例（画像）あなたが他のクラスを持っているからしかし

<div id="toast-container" 
    class="toast-top-center" 
    style="pointer-events: auto;"> 
</div>

ああ

<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%; 
}

さらには全くロードされませんでした。

出典

2017-11-20 06:11:20

申し訳ありませんが、 'parent-state'クラスはデバッグ時の試行の一部でした（私はそのスクリーンショットを置き換えました）。 'toast-top-center'クラスは期待どおりにレンダリングされます。 cssが親ステートに直接ロードされる必要があるので、子どもがアクセスできるようにする必要がありますか、または入れ子が何らかの形でCSSの適用の仕方になっていることでしょうか？ – NealR

デバッグコンソールで@NealRを実行すると、 'toast-top-center'のcssが表示されます。もしあなたがそれを見ないなら、あなたがCSSソースをロードしなかったことを意味します。 –

それは、私の 'gulpfile.js'にバグがあり、.cssファイルの読み込みを妨げるものでした。* facepalm * – NealR

toastrはui-routerの子ステートには表示されません

答えて

関連する問題