2017-11-17 40 views
10

नीचे मेरे माता-पिता/बच्चे राज्यों और index.html फ़ाइल का एक उदाहरण है जो मेरे कोणीय ऐप को प्रस्तुत करता है। toastr संदेश बच्चे के राज्यों में दिखाई देते हैं, सुनिश्चित नहीं है कि क्यों। निर्भरता को प्रत्येक नियंत्रक में अपेक्षित के रूप में शामिल किया गया है।टोस्टर ui-राउटर बाल राज्यों में दिखाई नहीं देता

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."); 
    }; 
(इस 'ऐप्लिकेशन' के हर बच्चे को राज्य में होता है)

गाया एचटीएमएल

enter image description here

+0

क्या आपने टोस्टर लाइब्रेरी को अपने कोणीय ऐप की निर्भरता के रूप में रखा था? कुछ 'angular.module (' ऐप ', [' टोस्टर '] जैसे कुछ' – MarkoCen

+0

हां, इसमें शामिल है। टोस्टर संदेश एचटीएमएल में दिखाई देते हैं, हालांकि वे बस दिखाई नहीं दे रहे हैं। – NealR

+0

क्या आप इसे प्लंकर/फीडल/कोडेपेन में पुन: उत्पन्न करने में सक्षम हैं? –

उत्तर

3

जब आप के रूप में positionClass: 'toast-top-center',

कॉन्फ़िगर यह होना चाहिए: parent-state:

<div id="toast-container" 
    class="toast-top-center" 
    style="pointer-events: auto;"> 
</div> 
हालांकि अपने उदाहरण (छवि) आप अन्य वर्ग है से

ae

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

तो यह

काम करना चाहिए आप छवि साधन की जगह नहीं दिख रहा है, तो किसी भी तरह वर्ग parent-state(अपने कस्टम वर्ग लगता है):

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

toast-container आईडी शैली है toast-top-center

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

या यहां तक ​​कि बिल्कुल भी लोड नहीं हुआ।

+0

क्षमा करें, कि 'पैरेंट-स्टेट' क्लास डिबगिंग के प्रयास का हिस्सा था (मैंने उस स्क्रीनशॉट को बदल दिया है)। 'टोस्ट-टॉप-सेंटर' वर्ग अपेक्षित के रूप में प्रस्तुत करता है। क्या यह हो सकता है कि सीएसएस को माता-पिता को सीधे राज्य में लोड किया जाना चाहिए ताकि इसे बच्चों द्वारा पहुंचा जा सके, या घोंसला किसी भी तरह से सीएसएस लागू होने के रास्ते में हो रही है? डीबग कंसोल में – NealR

+0

@NealR आपको 'टोस्ट-टॉप-सेंटर' के सीएसएस को देखना चाहिए। यदि आप इसे नहीं देखते हैं, तो इसका मतलब है कि आपने सीएसएस स्रोत –

+0

लोड नहीं किया था, यही था, मेरे 'gulpfile.js' में एक बग था जो .css फ़ाइल को लोड करने से रोक रहा था * फेसपाल्म * – NealR

संबंधित मुद्दे