Tab sref

The tab sref directive adds the ability to change the page's URL when the user clicks a tab. This also allows for users to navigate straight to a selected tab from a hyperlink.

Dependencies


Tab sref settings

  • bb-tab-sref="stateName" — The name of the state where the application should navigate when the tab is selected.

Optional state parameters can be provided

  • bb-tab-sref="stateName({param: value, param: value})" — Navigate to state, with params.

Demo

Markup


<div>
  <ui-view>
  </ui-view>

  <script type="text/ng-template" id="demo/tabsref/tabset.html">
    <uib-tabset>
      <uib-tab heading="Tab 1" bb-tab-sref="TabState1">Content</uib-tab>
      <uib-tab heading="Tab 2" bb-tab-sref="TabState2({username: 'John'})">
        <div ng-controller="TabSrefTestController">
          Content 2 - Username: {{ username }}
        </div>
      </uib-tab>
      <uib-tab heading="Tab 3" bb-tab-sref="TabState3">Content 3</uib-tab>
    </uib-tabset>
  </script>

</div>

JavaScript

/*global angular */
(function () {
    'use strict';

    function TabSrefConfig($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('rootState', {
                url: '/',
                templateUrl: 'demo/tabsref/tabset.html',
                params: { username: '' }
            })
            .state('TabState1', {
                parent: 'rootState',
                url: 'tabsref/tab1'
            })
            .state('TabState2', {
                parent: 'rootState',
                url: 'tabsref/tab2/:username',
                params: { username: '' }
            })
            .state('TabState3', {
                parent: 'rootState',
                url: 'tabsref/tab3'
            });

        $urlRouterProvider.when('', '/');
    }

    TabSrefTestController.$inject = ['$scope', '$stateParams'];
    function TabSrefTestController($scope, $stateParams) {
        $scope.username = $stateParams.username;
    }

    TabSrefConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
    angular.module('stache')
        .config(TabSrefConfig)
        .controller('TabSrefTestController', TabSrefTestController);
}());