AngularUI Router - Verschachtelte abstrakte Routen funktionieren nicht

Question

Ich passe eine Vorlage namens Pages für eine AngularJS-App an und ich konfiguriere verschachtelte Ansicht mit dem UI-Router. Es scheint, dass alles vorhanden ist, aber die verschachtelte Route "App/E-Mail" funktioniert nicht, wenn es heißt, UI Router löst "app/home" als die andere Anweisung aus.

Mein Code ist dies:

function($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) { 
     $urlRouterProvider 
      .otherwise('/app/home'); 

     $stateProvider 
      .state('app', { 
       abstract: true, 
       url: '/app', 
       templateUrl: "tpl/app.html" 
      }) 
      .state('app.home', { 
       url: '/home', 
       templateUrl: "tpl/home.html", 
       controller: 'HomeCtrl', 
       resolve: { 
        deps: ['$ocLazyLoad', function($ocLazyLoad) { 
         return $ocLazyLoad.load([ 

          ], { 
           insertBefore: '#lazyload_placeholder' 
          }) 
          .then(function() { 
           return $ocLazyLoad.load([ 
            'assets/js/controllers/home.js' 
           ]); 
          }); 
        }] 
       } 
      }) 
      .state('app.email', { 
       abstract: true, 
       url: '/email', 
       templateUrl: 'tpl/apps/email/email.html', 
       resolve: { 
        deps: ['$ocLazyLoad', function($ocLazyLoad) { 
         return $ocLazyLoad.load([ 
           'menuclipper', 
           'wysihtml5' 
          ], { 
           insertBefore: '#lazyload_placeholder' 
          }) 
          .then(function() { 
           return $ocLazyLoad.load([ 
            'assets/js/apps/email/service.js', 
            'assets/js/apps/email/email.js' 
           ]) 
          }); 
        }] 
       } 
      }) 
      .state('app.email.inbox', { 
       url: '/inbox/:emailId', 
       templateUrl: 'tpl/apps/email/email_inbox.html' 
      }) 
      .state('app.email.compose', { 
       url: '/compose', 
       templateUrl: 'tpl/apps/email/email_compose.html' 
      }); 

    } 

Answer 1

Ein abstrakter Staat kann Kind Staaten hat aber nicht selbst erhalten aktiviert werden. Ein "abstrakter" Zustand ist einfach ein Zustand, in den nicht übergegangen werden kann. Es wird implizit aktiviert, wenn einer seiner Nachkommen aktiviert ist.

überprüfen Sie diese link für weitere Informationen über abstrakte in State Provider.

Sie können E-Mail-Status als abstrakt wie unten Code verwenden.

.state('app.email', { 
       abstract: true, 
       url: '/email', 
       template : '<ui-view></ui-view>' 
    }) 
    .state('app.email.default', { 
       url: '/', 
       templateUrl: 'tpl/apps/email/email.html', 
       resolve: { 
        deps: ['$ocLazyLoad', function($ocLazyLoad) { 
         return $ocLazyLoad.load([ 
           'menuclipper', 
           'wysihtml5' 
          ], { 
           insertBefore: '#lazyload_placeholder' 
          }) 
          .then(function() { 
           return $ocLazyLoad.load([ 
            'assets/js/apps/email/service.js', 
            'assets/js/apps/email/email.js' 
           ]) 
          }); 
        }] 
       } 
      }) 
      .state('app.email.inbox', { 
       url: '/inbox/:emailId', 
       templateUrl: 'tpl/apps/email/email_inbox.html' 
      }) 
      .state('app.email.compose', { 
       url: '/compose', 
       templateUrl: 'tpl/apps/email/email_compose.html' 
      });