角度引导选项卡 - 选择页面加载中调用的函数答案

【问题标题】：angular bootstrap tabs - select function called in page load角度引导选项卡 - 选择页面加载中调用的函数
【发布时间】：2016-08-20 07:57:01
【问题描述】：

我有以下格式的角度引导选项卡。（见小偷）

选择功能应该在标签被选中时触发。但奇怪的是，当页面加载时，第一个选项卡的选择功能被触发。（打印选项卡选择动态标题 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>

【问题讨论】：

select() (Defaults: null) : An optional expression called when tab is activated 所以这是有道理的，默认情况下，在加载期间第一个选项卡被激活并触发事件。
有没有什么方法可以避免页面加载时出现这种情况？
查看 angular-ui 的源代码似乎没有办法指定。但是你可以很容易地做到var firstTime = true; $scope.tabSelect = function(title){ if(firstTime){ firstTime = false; return; } console.log("tab selected "+title); };
ng-click 解决方案完美运行。请考虑接受它作为正确答案。

标签： javascript angularjs twitter-bootstrap angularjs-ng-repeat angular-ui

【解决方案1】：

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

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

【讨论】：