具有嵌套状态的多个视图角度UI路由器

时间:2016-01-26 20:13:21

标签: javascript html angularjs angular-ui-router

是否可以在 Angular UI-Router 中包含多个包含嵌套状态的视图?

例如,在下面,view1@main可以包含嵌套状态吗?让我们说Main包含两个页面部分,view1@main包含一个列表,可以动态填充我想要嵌套的视图中的数据。

HTML

<div class="main-container">
  <div ui-view="view1">

      <!--this is inside the template for view1-->
      <div class="myList">
          <!--ng-repeat each with a click setting the nested view-->
      </div>

      <div ui-view>
      <!--this would be another template that -->
      <!--changes based on the click from the ng-repeat -->
      </div>
  </div>

  <div ui-view="view2"></div>
</div>

JS

.state('main', {
     url: '/main',
     controller: 'MainCtrl',
     views: {
          '': {
              templateUrl: 'views/main.html'
          },
          'view1@main': {
               templateUrl: 'views/view1.html',
               controller: 'MainCtrl'
               //nested states in here
          },
          'view2@main': {
                templateUrl: 'views/view2.html',
                controller: 'SecondCtrl'
          }
     }
}

0 个答案:

没有答案