javascript - AngularJs Ui-view 无法正确显示

Question

我想在页面的一部分中使用 ui-view 和 ui-router。但由于某种原因，我无法显示我的模板“app_usermng_table.html”。该部分主要代码如下:

1.路由器配置部分

(我已经在我的模块“app”中添加了“ui.router”依赖项。)

.state('app.usermng', {
              url: '/usermng',
              templateUrl: 'tpl/app_usermng.html',

              resolve: {
                  deps: ['uiLoad',
                    function( uiLoad ){
                      return uiLoad.load( ['js/controllers/usermng/usermng.js','css/usermng.css'] );
                  }]
              },
              onEnter: function(){
                console.log("enter usermng");
              }
          })
          .state('app.usermng.table',{
              url:'/table',
              templateUrl:'tpl/app_usermng_table.html',
              resolve:{
                deps:[
                    'uiload',
                    function(uiload){
                      return uiload.load(['js/controllers/usermng/usermngtable.js'])
                    }
                ]
              },
              onEnter: function(){
                console.log("enter usermng table");
              }

          })

2.app_usermng.html:

我想把模板放在

<div ui-view></div>

标签。

<div class="hbox hbox-auto-xs hbox-auto-sm" ng-controller="UsermngCtrl">
  <div ng-controller="UsermngCtrl">
    <div class="bg-light lter b-b wrapper-md">
      <h1 class="m-n font-thin h3">User Management</h1>
    </div>
  <div ui-view></div>
 </div>
</div>

3.用户管理 Controller

我添加代码

$state.transitionTo

希望当我进入状态“app.usermng”时，状态“app.usermng.table”可以显示在其父状态中。

app.controller('UsermngCtrl',['$scope','$state',function($scope,$state){
   $state.transitionTo('app.usermng.table');
   console.log("table")
}]); 

4.导航栏

我希望当我点击导航栏上的“用户管理”时它会跳转到“app.usermng”状态。

<li ui-sref-active="active">
<a ui-sref="app.usermng">
<i class="glyphicon glyphicon-list-alt icon text-info-dker"></i>
<span class="font-bold" translate="aside.nav.usermng">User Management</span>
</a>
</li>

但是，我所做的一切似乎都没用...表格部分没有显示。控制台内容如下:

enter usermng
usermng.js:3 table
usermng.js:3 table

似乎我的子状态“app.usermng.table”从未进入。

谁能告诉我这是什么问题吗？非常感谢! :)

Answer 1

您需要添加一个 'abstract':true 属性，如下所示:

.state('app.usermng', {
          url: '/usermng',
          templateUrl: 'tpl/app_usermng.html',
          abstract: true,
          resolve: {
              deps: ['uiLoad',
                function( uiLoad ){
                  return uiLoad.load( ['js/controllers/usermng/usermng.js','css/usermng.css'] );
              }]
          },
          onEnter: function(){
            console.log("enter usermng");
          }
      })
      .state('app.usermng.table',{
          url:'/table',
          templateUrl:'tpl/app_usermng_table.html',
          resolve:{
            deps:[
                'uiload',
                function(uiload){
                  return uiload.load(['js/controllers/usermng/usermngtable.js'])
                }
            ]
          },
          onEnter: function(){
            console.log("enter usermng table");
          }

      })