AngularJS UI-Router:抽象状态+子状态不起作用 [英] AngularJS UI-Router : Abstract state + child states not working

问题描述

我正在尝试使用抽象状态，但无法加载子级.

我的应用设置如下:

角度.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('登录', {网址:'/登录'，templateUrl: 'views/login.html',控制器:'登录Ctrl'，数据: {要求登录:假}}).state('应用程序', {摘要:真实，网址:'/应用'，数据: {要求登录:true}}).state('app.dashboard', {网址:'/仪表板'，templateUrl: 'views/dashboard.html',控制器:'DashboardCtrl',});});

登录路径工作正常.但是，应用程序或 app.dashboard 路由未注册，因为我什至无法从控制器获取 console.log.

请注意 index.html 正在正确创建导航

<li><a ui-sref="login" href="#/login">登录</a></li><li><a ui-sref="app.dashboard" href="#/app/dashboard">仪表板</a></li>

解决方案

如果抽象状态的片段是真实的(按原样)，问题应该像这样解决:

.state('app', {摘要:真实，网址:'/应用'，数据: {要求登录:true}//为孩子添加模板模板: "
",})

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

<块引用>

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

I'm trying to use an abstract state but I cannot load the child.

My app is setup as following:

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

The login route is working fine. However, the app or app.dashboard route does not register as I can't even console.log from the controller.

Just a note that the index.html is creating the navigation correctly

<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>

解决方案

In case that snippet of the abstract state is real (as is), the issue should be fixed like this:

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

Simply, every state needs to be injected somewhere. If we do not use named views (or even absolute naming) it is expected that:

every child is injected into its parent target ui-view

这篇关于AngularJS UI-Router:抽象状态+子状态不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！