AngularJS function being called erroneously on route change

Question

I have an app using AngularJS and bootstrap that is causing me some problems. The main navigation is done through tabs and routing configured as follows:

app.config(function($routeProvider) {
  $routeProvider.when("/", {
    templateUrl: "index.html",
    controller: "controllerIndex"
  }).when("/pageone", {
    templateUrl: "pageone.html",
    controller: "controllerPageOne"
  }).when("/pagetwo", {
    templateUrl: "pagetwo.html",
    controller: "controllerPageTwo"
  });
  return $routeProvider.otherwise({
    templateUrl: "error.html"
  });
});

In my pagetwo tab, I have two more tabs:

<tabset>
   <tab heading="Metrics" active="tabs[0]" select="changeTab(0)"> 
   <tab heading="Admin LDAP Search" active="tabs[1]" select="changeTab(1)">
</tabset>

As you can probably tell, I have been using a function changeTab and the "active" attribute to try and make the app remember what tab was selected on this page, even as the route changes. In controllerPageTwo, the relevant code is:

$scope.getCurrentTab = tabTracker.getCurrentTab()
$scope.tabs = tabTracker.getTabs()

$scope.changeTab = (tab) ->
  tabTracker.setCurrentTab(tab)

The idea being that when the route changes to /pagetwo, the current (active) tab and the array of tabs will be pulled from a service, tabTracker. Then, the tab will be changed to that one by setting the proper array value to true, and the other to false. This works as expected, and is called when I change tabs as expected.

However, any time the route changes FROM /pagetwo, changeTab is called with a value of 1. This means that no matter what, when the route changes, the second tab will be the active one on return to this page.

Why is it being called with this max value? (I was messing around with three tabs, and had the same issue but it would call it with a value of 2). I know sometimes code is ran twice in the controllers, but I have no references to ng-controller anywhere except in my index.html.

Let me know if you need more information, I tried to include everything relevant without it getting too long.

Shaun Scovil · Accepted Answer · 2015-12-23 16:41:07Z

1

You want to use

ng-click="changeTab(0)"

instead of

select="changeTab(0)"

The latter is probably calling the function during the compile phase.

EDIT

If you're using AngularUI, you have the correct syntax but the directives should be

<uib-tabset>

and

<uib-tab>

answered Dec 23, 2015 at 16:41

Shaun Scovil

4,0075 gold badges45 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

elykl33t Over a year ago

That seems to have been it! I had seen some different examples on stackoverflow of both being used, so I wasn't sure. Thank you!

Justin · Accepted Answer · 2015-12-23 16:44:01Z

1

it shouldn't happen. You can set a break point in changeTab and find who is calling this method with parameter 1

answered Dec 23, 2015 at 16:44

Justin

1,16612 silver badges32 bronze badges

1 Comment

elykl33t Over a year ago

Shaun was right above, it was using select. Looking through the debugger (which I had set a breakpoint at, but i didn't know how to see where it was called from), I saw some references to select, which ended up being the issue. Thanks!

Collectives™ on Stack Overflow

AngularJS function being called erroneously on route change

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related