Angular UI路由器 - 是否有可能具有多级嵌套命名视图？

我正在尝试使用命名视图的嵌套创建一个SPA角度应用程序。但创建此设置不成功。有人能帮我指出我的错误吗？Angular UI路由器 - 是否有可能具有多级嵌套命名视图？

在索引页上我有两个命名的视图，我能够看到这两个页面 - viewA和viewB。

<!-index.html---> 
<table> 
    <tr> 
     <td> 
      <div ui-view="viewA"></div> 
     </td> 
     <td> 
      <div ui-view="viewB"></div> 
     </td> 
    </tr> 
</table>

在ViewA上，我不知道如何加载另外2个命名视图 - view1，view2。我被困在这里。

<!-viewA.html---> 
<div> 
<h3>This is view A</h3> 
<table> 
    <tr> 
     <td> 
      <div ui-view="view1"></div> 
     </td> 
     <td> 
      <div ui-view="view2"></div> 
     </td> 
    </tr> 
</table> 
</div>

我得到了这样的结构：

angular.module('myApp', ['ui.router']).config(function ($stateProvider, $urlRouterProvider) { 
$stateProvider 
    .state('index', { 
     url: "", 
     views: { 
      "viewA": { 
       templateUrl: "partials/views/viewA.html" 
      }, 
      "viewB": { 
       templateUrl: "partials/views/viewB.html" 
      } 
     } 
    }).state('index.viewA', { 
     views: { 
      "view1": { 
       templateUrl: "partials/views/view1.html" 
      }, 
      "view2": { 
       templateUrl: "partials/views/view2.html" 
      } 
     } 
    });

}）;

来源

2014-04-01 mallkar

看来这是不可能的， – mallkar

-3

，可以使用绝对命名指定这类命名视图：

$stateProvider 
    .state('index', { 
     url: '/index', 
     views: { 
      'viewA': { template:"<h1>This is view A<h1><a ui-sref='index.view1'>link to view 1</a> <div ui-view='view1'></div>" }, 
     } 
    }) 
    .state('index.view1', { 
     url: '/index/view1', 
     views: { 
      '[email protected]': { template : '<H3>This is view 1</H3>'} 

     } 
    }

这里有一个plunker：http://plnkr.co/edit/TupJbvrMLxdjhU0Wjc1p?p=preview

这基本上是问题的重复： AngularJS UI router: How to configure nested named views?

来源

2014-06-25 11:01:37 eventures

Angular UI路由器 - 是否有可能具有多级嵌套命名视图？

回答

相关问题