Warning: This site describes the AngularJS (1.x) implementation of the SKY UX framework. We still support this version, but it is in maintenance mode. We no longer develop features for this version of SKY UX, and we recommend that you use the latest version instead. For more information, see developer.blackbaud.com/skyux.

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);
}());