2017-11-17 97 views
10

Poniżej znajduje się przykład stanów nadrzędnych/potomnych i pliku index.html, który renderuje moją aplikację kątową. W stanach podrzędnych pojawiają się komunikaty, nie wiem dlaczego. Zależność jest uwzględniana zgodnie z oczekiwaniami w każdym kontrolerze.toastr nie pojawia się w stanach potomnych routera ui-routera

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> 

kontroler próbki (tak się dzieje w każdym stanie potomnego '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."); 
    }; 

wytopione HTML

enter image description here

+0

Czy umieściłeś bibliotekę toastr jako zależność swojej aplikacji kątowej? coś takiego jak 'angular.module ('app', ['toastr'])' – MarkoCen

+0

Tak, jest dołączone. Komunikaty toastr pojawiają się w html, ale po prostu nie są widoczne. – NealR

+0

Czy można go odtworzyć w Plunker/Fiddle/Codepen? –

Odpowiedz

3

Podczas konfigurowania go jako positionClass: 'toast-top-center',

Powinno być:

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

Jednak ze swoim przykładzie (obraz) masz inną klasę: parent-state ae

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

toast-container id ma styl:

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

więc powinien działać

Jeśli nie widzisz środków graficznych, jakoś klasa parent-state(załóżmy swoją klasę niestandardową) zostaje zastąpiony przez toast-top-center.

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

lub nawet nie ładować w ogóle.

+0

Niestety, klasa 'parent-state' była częścią próby debugowania (zastąpiłem ten zrzut ekranu). Klasa 'toast-top-center' renderuje się zgodnie z oczekiwaniami. Czy to możliwe, że css musi być załadowany bezpośrednio do stanu nadrzędnego, aby mógł być dostępny dla dzieci, lub zagnieżdżanie się w jakiś sposób staje na drodze do zastosowania css? – NealR

+0

@NealR w konsoli debugowania powinieneś zobaczyć css 'toast-top-center'. Jeśli go nie widzisz, oznacza to, że nie załadowałeś źródeł css. –

+0

To był błąd w moim pliku 'gulpfile.js' uniemożliwiającym załadowanie pliku .css * facepalm * – NealR