angular bootstrap 选项卡 - select 页面加载中调用的函数

Question

我有以下格式的 angular bootstrap 选项卡。（见 plunker）

select 函数应该在选项卡 selected 时触发。但奇怪的是，当页面加载时，第一个选项卡的 select 函数被触发。（打印选项卡 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>

Answer 1

将您的 select 更改为 ng-click，如下所示：

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

angular bootstrap 选项卡 - select 页面加载中调用的函数

angular bootstrap tabs - select function called in page load

javascript

twitter-bootstrap

angularjs

angular-ui

angularjs-ng-repeat