angular bootstrap tabs - select function called in page load

问题

I have the angular bootstrap tabs in the following format. (see the plunker)

The select function is supposed to trigger when the tabs are selected. But strangely, when the page is loaded, the very first tab's select function gets triggered. (prints tab selected Dynamic Title 1 onload..)

"http://plnkr.co/edit/vyOOhCdIl7s1Wvou7Dr9?p=preview"

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope) {
  $scope.tabs = [
    { title:'Dynamic Title 1', content:'Dynamic content 1' },
    { title:'Dynamic Title 2', content:'Dynamic content 2' },
    { title:'Dynamic Title 3', content:'Dynamic content 3' }
  ];
  
  $scope.tabSelect = function(title){
    console.log("tab selected "+title);
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div ng-controller="TabsDemoCtrl">
      <tabset>
        <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled" select="tabSelect(tab.title)">
          {{tab.content}}
        </tab>
      </tabset>
    </div>
  </body>
</html>

回答1:

change your select to ng-click like this:

<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" ng-click="tabSelect(tab.title)">

来源：https://stackoverflow.com/questions/30293887/angular-bootstrap-tabs-select-function-called-in-page-load

标签

javascript

angularjs

twitter-bootstrap

angularjs-ng-repeat

angular-ui