javascript - AngularJS 函数在路由更改时被错误调用

Question

我有一个使用 AngularJS 和 Bootstrap 的应用程序给我带来了一些问题。主要导航是通过选项卡和配置如下的路由完成的:

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

在我的 pagetwo 选项卡中，我还有两个选项卡:

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

您可能会说，我一直在使用函数 changeTab 和“active”属性来尝试让应用记住在此页面上选择了哪个选项卡，即使在路线发生变化时也是如此。在controllerPageTwo中，相关代码为:

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

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

想法是，当路由更改为/pagetwo 时，当前(事件)选项卡和选项卡数组将从服务 tabTracker 中提取。然后，通过将正确的数组值设置为 true，将另一个设置为 false，选项卡将更改为该选项卡。这按预期工作，并在我按预期更改选项卡时调用。

但是，任何时候路由从/pagetwo 更改时，都会调用 changeTab 并将值为 1。这意味着无论如何，当路由更改时，第二个选项卡将在返回此页面时处于事件状态。

为什么用这个最大值调用它？ (我在弄乱三个选项卡，遇到了同样的问题，但它会用值 2 调用它)。我知道有时代码会在 Controller 中运行两次，但除了我的 index.html 之外，我没有在任何地方引用 ng-controller。

如果您需要更多信息，请告诉我，我尽量在不拖太长的情况下包含所有相关内容。

Answer 1

你想用

ng-click="changeTab(0)"

代替

select="changeTab(0)"

后者可能在编译阶段调用函数。

编辑

如果您使用的是 AngularUI，您的语法是正确的，但指令应该是

<uib-tabset>

和

<uib-tab>