angularjs：ui-router（嵌套视图）和bootstrap标签不好玩

Question

http://plnkr.co/edit/F5jojPEBVaAIyMa0CXDw

I am having issues getting the ui-router to load a fragment into a bootstrap tab body. I linked my code example above. Please let me know if I missed something. I have looked at 10 different stack overflow examples and non of them have helped solve my problem.

I have an outer ui-view that loads the initial page fragment fine.

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

Next I have the fragment that is loaded (This is where the tabs are set up)

<div class="row">
  <div class="col-lg-10 col-lg-offset-1">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
      <li ng-repeat="tab in tabs" ui-sref="{{tab.link}}" ui-sref-active="active"><a>{{tab.label}}</a></li>
    </ul>

    <div id="my-tab-content" class="tab-content" ui-view="tabs"></div>
  </div>
</div>

Following that I have a two fragment pages that for test only have some text in them (request-tab.html and approved-tab.html)

Finally, I have the js file that routes the views. I left off the controllers to shorten the post. They are on the plunker if needed but they shouldn't be the issue.

var app = angular.module("BRAVO", ['ui.router', 'ui.bootstrap', 'ui.bootstrap.tpls']);

app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/requestView/request');
    $stateProvider
    /* Main Views */
      .state('requestView', {
        url: '/requestView',
        templateUrl: 'bravo_home.html',
        controller: 'requestCtrl'
      })
      /*Other states here*/

    /* Tabs */
    .state('requestView.request', {
        url: '/request',
        view: {
          'tabs': {
            templateUrl: 'request-tab.html',
            controller: 'requestTabCtrl'
          }
        }
      })

      .state('requestView.approved', {
        url: '/approved',
        view: {
          'tabs': {
            templateUrl: 'approved-tab.html'
          }
        }
      });
  }) 

Answer 1

plunker

 <div class="row"> <div class="col-lg-10 col-lg-offset-1"> <ul id="tabs" class="nav nav-tabs" data-tabs="tabs"> <li ui-sref-active="active" ng-repeat="tab in tabs"><a ui-sref="{{tab.link}}" >{{tab.label}}</a></li> </ul> <div id="my-tab-content" class="tab-content" ui-view="tabs"></div> </div> </div> 

Answer 2

You should set your states like this:

    $stateProvider
    /* Main Views */
      .state('requestView', {
        url: '/requestView',
        templateUrl: 'bravo_home.html',
        controller: 'requestCtrl'
      })
      /*Other states here*/

    /* Tabs */
    .state('requestView.request', {
        url: '/request',
        templateUrl: 'request-tab.html'
     })

    .state('requestView.approved', {
        url: '/approved',
        templateUrl: 'approved-tab.html'
     });

Then, in your bravo_home.html: <div id="my-tab-content" class="tab-content" ui-view></div> Note that I removed the ="tabs". You can add controllers to your nested tab states as needed, for example:

    // add "controller: 'requestTabCtrl'" to state
    .controller("requestTabCtrl", function($scope) {
        console.log('Hello Request Tab');
    })
    // add "controller: 'approvedTabCtrl''" to state
    .controller("approvedTabCtrl", function($scope) {
        console.log('Hello Approved Tab');
    });