AngularJS UI的路由器：抽象状态+孩子规定不工作 [英] AngularJS UI-Router : Abstract state + child states not working

问题描述

我试图用一个抽象的状态，但我不能加载子。

我的应用程序是安装程序如下：

 角
  .module（'milordApp'，[
    ui.router'，
    ngAnimate'，
    ngCookies'，
    ngMessages'，
    ngResource'，
    ngRoute'，
    ngSanitize'，
   ngTouch
]）
.RUN（函数（$ rootScope）{
    $ rootScope。在$（'$ routeChangeStart'，函数（事件，toState，toParams，fromState，fromParams）{
      的console.log（toState，toParams，fromState，fromParams）;
    }）;
}）
的.config（函数（$ stateProvider，$ urlRouterProvider）{
    $ urlRouterProvider.otherwise（/登录）;
    $ stateProvider
      .STATE（'登陆'，{
        网址：'/登录'，
        templateUrl：意见/ login.html的，
        控制器：'LoginCtrl'，
        数据：{
          requireLogin：假的
        }
     }）
     .STATE（'应用'，{
       摘要：真实，
       网址：'/应用程序'，
       数据：{
        requireLogin：真
       }
     }）
     .STATE（'app.dashboard'，{
       网址：'/仪表盘，
       templateUrl：意见/ dashboard.html'，
       控制器：'DashboardCtrl'，
     }）;
}）;
 

登录路线是工作的罚款。但是，应用程序或app.dashboard路线不注册成为我甚至无法从控制器CONSOLE.LOG。

刚一说明了的index.html正确创建导航

 ＆LT; UL类=NAV导航栏，导航＆GT;
   ＆LT;立GT;＆LT;一个UI的SREF =登录的href =＃/登录＆GT;登录和LT; / A＆GT;＆LT; /李＆GT;
   ＆LT;立GT;＆LT;一个UI的SREF =app.dashboard的href =＃/应用/仪表板＆GT;仪表及LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
 

解决方案

在情况下片段抽象状态是真实的（这是），这个问题应该是固定的是这样的：

  .STATE（'应用'，{
   摘要：真实，
   网址：'/应用程序'，
   数据：{
    requireLogin：真
   }
   //为孩子添加模板
   模板：＆LT;格UI的视图＆gt;＆LT; / DIV＆gt;中，
 }）
 

简单地说，每一个国家需要在某处被注入。如果我们不使用命名视图（甚至绝对命名）预计：

  

每个孩子都被注入到其父目标的 用户界面视图

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的路由器：抽象状态+孩子规定不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！