AngularJS UI-Router:抽象状态+子状态不起作用

AngularJS UI-Router : Abstract state + child states not working

本文关键字：状态 不起作用 抽象 UI-Router AngularJS      更新时间：2023-09-26

我尝试使用抽象状态，但无法加载子状态。

我的应用程序设置如下:

angular
  .module('milordApp', [
    'ui.router',
    'ngAnimate',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
   'ngTouch'
])
.run(function($rootScope) {
    $rootScope.$on('$routeChangeStart', function(event, toState,  toParams, fromState, fromParams) {
      console.log(toState, toParams, fromState, fromParams);
    });
})
.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise("/login");
    $stateProvider
      .state('login', {
        url: '/login',
        templateUrl: 'views/login.html',
        controller: 'LoginCtrl',
        data: {
          requireLogin: false
        }
     })
     .state('app', {
       abstract: true,
       url: '/app',
       data: {
        requireLogin: true
       }
     })
     .state('app.dashboard', {
       url: '/dashboard',
       templateUrl: 'views/dashboard.html',
       controller: 'DashboardCtrl',
     });
});

登录路由正常。然而，app或app.dashboard路由没有注册，因为我甚至无法从控制器中获取console.log。

需要注意的是index.html正确创建了导航

<ul class="nav navbar-nav">
   <li><a ui-sref="login" href="#/login">Login</a></li>
   <li><a ui-sref="app.dashboard" href="#/app/dashboard">Dashboard</a></li>
</ul>

如果抽象状态的代码片段是真实的(原样)，则应该像这样修复这个问题:

.state('app', {
   abstract: true,
   url: '/app',
   data: {
    requireLogin: true
   }
   // add template for child
   template: "<div ui-view></div>",
 })

简单地说，每个状态都需要注入到某个地方。如果我们不使用命名视图(甚至不使用绝对命名)，则期望:

每个子目标都被注入父目标 ui-view

相关文章：