modified tabs to work with browser history navigation - Issue 673

Author: Colinh84

app/directives/tc-tabs/tc-tabs.directive.js

@@ -11,25 +11,49 @@ import angular from 'angular'
         bindToController: true,
         template: require('./tc-tabs')(),
         scope: {},
-        controller: ['$log', function($log, $scope, $element) {
+        controller: ['$log', '$location', '$scope', function($log, $location, $scope, $element) {
           $log = $log.getInstance('TcTabSetController')
+          var tabCtrl = this;
           this.tabs = []
           this.addTab = function addTab(tab) {
             this.tabs.push(tab)
-            if (this.tabs.length === 1) {
-              tab.active = true
+            if (!angular.isDefined($location.search().tab) && this.tabs.length === 1) {
+              tab.active = true;
+            } else if ($location.search().tab === tab.heading) {
+              tab.active = true;
             }
           }
 
           this.select = function(selectedTab) {
+            var select = false;
             angular.forEach(this.tabs, function(tab) {
-              if (tab.active && tab !== selectedTab) {
-                tab.active = false
+              if (tab.active && tab.heading !== selectedTab.heading) {
+                tab.active = false;
+              } else if (tab.heading === selectedTab.heading) {
+                tab.active = true;
+                select = true;
               }
-            })
+            });
+            if (select === false && this.tabs.length > 0) {
+              this.tabs[0].active = true;
+            }
+          }
 
-            selectedTab.active = true
+          this.setTab = function(tab) {
+            if ($location.search().tab !== tab.heading) {
+              $location.search('tab', tab.heading);
+            }
           }
+
+          $scope.$on( "$locationChangeSuccess", function() {
+            if (angular.isDefined($location.search().tab)) {
+              var tab = $location.search().tab;
+              tabCtrl.select({'heading' : tab});
+            } else if (tabCtrl.tabs.length > 0) {
+              var tab = tabCtrl.tabs[0].heading;
+              tabCtrl.select({'heading' : tab});
+            }
+          });
         }],
         controllerAs: 'tabSet'
       }

app/directives/tc-tabs/tc-tabs.jade

@@ -1,8 +1,8 @@
 .tab-panel
-  
+
   ul.tab-set
     li.tab-pill(ng-repeat="tab in tabSet.tabs")
-      a(ng-click="tabSet.select(tab)", ng-class="{'selected': tab.active}")
+      a(ng-click="tabSet.setTab(tab)", ng-class="{'selected': tab.active}")
         .header(ng-class="{'selected': tab.active}") {{tab.heading}}
 
   .tab-view(ng-transclude)