Angular UI Bootstrap Tabs open on route change

Question

I am using the tab directive from Bootstrap UI for my current AngularJS project and am heavily struggling with the implementation of route-based tabs .

<tabset>
    <tab heading="Dashboard"
             select="$parent.onTabSelected('dashboard')"
             active="$parent.isActive(this)">
        <!-- Content... -->
    </tab>
</tabset>

While the select attribute works okay for changing the route when clicking a tab heading I cannot get the active attribute to work as above (fails inside of angular-ui afterparsing the expression).

So my question is: why does the active attribute not work and is there a better way to bind the tabs to my route bidirectional?

UPDATE: The following is my controller:

MainCtrl = function($scope) {
    $scope.rooms = [{
        id : 0,
        title : 'Room 1'
    }, {
        id : 1,
        title : 'Room 2'
    }];

    $scope.isActive = function(route) {
        if(('#/' + route) === location.hash) {
            return true;
        }
        return false;
    }

    $scope.onTabSelected = function(tab) {
        var route;
        if ( typeof tab === 'string') {
            switch(tab) {
                case 'dashboard':
                    route = 'dashboard';
                    break;
            }
        } else {
            route = 'rooms/' + tab.room.id;
        }
        window.location.hash = '#/' + route;
    }
};

The isActive method is called properly but then the following exception occurs:

TypeError: undefined is not a function
at postLink (http://fakepath/bootstrap-ui/templates.js:2374:11)

Apparently, the setActive method inside of the directive function is not created for some reason. Any idea why?

Answer 1

Here is a simple working example as close as to your code without seeing it all, save this in as index.html and test, tried putting in plunkr(not testable in plunkr but works, but the source is there as well: http://embed.plnkr.co/TMN3KNlS4Dv90SvbTQKJ/index.html ):

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet">
</head>

<body ng-controller="MainCtrl">

  <div ng-controller="TabCtrl">
    <tabset>
      <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" select="onTabSelected(tab.slug)">
        {{ tab.content }}
      </tab>
    </tabset>
  </div>
  <script type="text/javascript" charset="utf-8">
    angular.module('app', ['ui.bootstrap']).config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.when('/', {
            controller: 'MainCtrl'
        }).when('/room/:id', {
            controller: 'RoomCtrl',
        }).when('/dashboard', {
            controller: 'DashboardCtrl'            
        }).otherwise({
            redirectTo: '/'
        });
        $locationProvider.html5Mode(false);
    }]);    

    var TabCtrl = function($scope) {
      $scope.tabs = [{
        slug: 'dashboard',
        title: "Dashboard",
        content: "Your Dashboard"
      }, {
        slug: 'room-1',
        title: "Room 1",
        content: "Dynamic content 1"
      }, {
        slug: 'room-2',
        title: "Room 2",
        content: "Dynamic content 2"
      }];
    };

    RoomCtrl = function($scope, $location) {

    };

    DashboardCtrl = function($scope, $location) {

    };    

    MainCtrl = function($scope, $location) {

      $scope.onTabSelected = function(tab) {
        var route;
        if (typeof tab === 'string') {
          switch (tab) {
            case 'dashboard':
              route = tab;
              break;
            default:
              route = 'rooms/' + tab;
              break;
          }
        }
        $location.path('/' + route);
      };

    };
  </script>
</body>

</html>

Angular UI Bootstrap Tabs open on route change

Question

1 answers

solution1
0 2013-11-02 16:50:29

Angular UI Bootstrap Tabs open on route change

Question

1 answers

solution1 0 2013-11-02 16:50:29

solution1
0 2013-11-02 16:50:29