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. 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”永远不会进入。

有谁能告诉我这是什么问题。谢谢你！ :)

Answer 1

您需要添加一个＆＃39; abstract＆＃39;：true属性，如下所示：

9/5

Answer 2

很难说出你的意思。您正在为表状态提供一个URL，这使我认为您希望这是一个独立的状态，在这种情况下，您需要直接display直接声明而不是转换到父状态。如果表状态只是一个父状态的一部分，那么有一种方法可以做到这一点。

您需要使用命名视图。如果我是正确的transitionTo不是一个自己的状态，那么它只是一个状态，只能作为app.usermng.table状态的一部分显示。因此，在定义app.usermng时，需要将表声明为命名视图。

app.usermng

然后，在父模板中，在要插入表格的$stateProvider .state('app.usermng', { views: { 'table': { templateUrl:'tpl/app_usermng_table.html', resolve: [] } } })中，您应该将其声明为div

见这里：https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

AngularJs Ui-view无法正确显示

2 个答案: