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路由器 - 是否有可能具有多級嵌套命名視圖？

回答

相關問題