javascript - AngularJs Ui View 无法正确显示

我想在页面的一部分中使用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.usermng控制器

我添加代码

$state.transitionTo

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

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

4.导航栏

我希望当我在导航栏上单击“ UserManagement”时，它跳转到“ 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”从未进入。

谁能告诉我这是什么问题，非常感谢！ :)

最佳答案

您需要添加一个“抽象”：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");
          }

      })

关于javascript - AngularJs Ui View 无法正确显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34915095/