current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 1 down vote favorite

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'
          }
        }
      });
  })
share|improve this question
up vote 0 down vote

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>

share|improve this answer
    
That didn't work for me. The tabs switch and the url changes to /requested or /approved, but nothing is loaded, not the fragment or the controller. Thanks, Josh – Josh Jul 6 at 21:00
up vote 0 down vote

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');
    });
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.