Javascript AngularJs Ui视图可以'；不能正确显示

我想在我的页面的一部分使用ui视图和ui路由器。但由于某些原因，我无法显示我的模板“app\u usermng\u table.html”。 本部分主要代码如下：

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

1.路由器配置部分

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

2.app_usermng.html：

我想把模板放在

<div ui-view></div>

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

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

4.导航栏

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

用户管理

然而，我所做的一切似乎都是无用的…表部分没有显示。控制台内容如下：

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");
          }

      })

---

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

      })

---

很难说你来这里的目的是什么。您给了表状态一个URL，这让我觉得您希望它是一个独立的状态，在这种情况下，您需要直接转换到该状态，而不是转换到父状态。如果表状态只是父状态的一部分，那么有一种方法可以做到这一点

您需要使用命名视图。如果我正确的话，

app.usermng.table

本身不是一个状态，那么它是一个仅作为

app.usermng

状态的一部分显示的状态。因此，在定义app.usermng时，需要将表声明为命名视图

$stateProvider
  .state('app.usermng', {
    views: {
      'table': { 
         templateUrl:'tpl/app_usermng_table.html',
         resolve: []
       }
    }
  })

然后，在父模板中，在要插入表的

div

中，应该像

---

请看这里：

很难说清楚你的目的是什么。您给了表状态一个URL，这让我觉得您希望它是一个独立的状态，在这种情况下，您需要直接转换到该状态，而不是转换到父状态。如果表状态只是父状态的一部分，那么有一种方法可以做到这一点

您需要使用命名视图。如果我正确的话，

app.usermng.table

本身不是一个状态，那么它是一个仅作为

app.usermng

状态的一部分显示的状态。因此，在定义app.usermng时，需要将表声明为命名视图

$stateProvider
  .state('app.usermng', {
    views: {
      'table': { 
         templateUrl:'tpl/app_usermng_table.html',
         resolve: []
       }
    }
  })

然后，在父模板中，在要插入表的

div

中，应该像

---

请参见此处：

非常感谢。我将js文件**'js/controllers/usermng/usermngtable.js'**添加到状态“app.usermng”的解析中，并在usermng.js中删除$state.transitiono。然后它就可以正常工作了。：）谢谢。我将js文件**'js/controllers/usermng/usermngtable.js'**添加到状态“app.usermng”的解析中，并在usermng.js中删除$state.transitiono。然后它就可以正常工作了。：）