AngularUI路由器 - 嵌套的抽象路线不工作

Question

我正在修改一个名为Pages的模板AngularJS应用程序，我正在用UI路由器配置嵌套视图。似乎一切都已到位，但嵌套路由“app/email”不起作用，只要它被称为UI路由器触发“app/home”作为其他语句。

我的代码是这样的：

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

一种抽象状态可以有子状态，但不能得到激活本身。 “抽象”状态只是一个无法转换到的状态。当其后代的一个被激活时，它被隐式激活。

检查此link以获取有关州提供者中抽象的更多详细信息。

你可以像下面的代码一样使用email状态作为抽象。

.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' 
      });