引导选项卡控件触发所有选项卡的代码答案

【问题标题】：Bootstrap's Tab Control fires code for all tabs引导选项卡控件触发所有选项卡的代码
【发布时间】：2017-01-12 18:07:29
【问题描述】：

我在我的 Angular 1.5.8 MVC asp.net Web 应用程序上使用 Bootstrap 3.0 Tab Strip。

目前我有 5 个标签。每个选项卡都会对服务器进行昂贵的数据调用以检索数据。

目前，当页面加载时，所有 5 个选项卡的所有代码都会执行，因为我将所有代码都放在一个控制器文件中。

有没有办法只加载默认选项卡的数据？因此，只有在单击每个选项卡时才会触发其他选项卡的数据调用？

另外，有没有办法给每个标签附加一个角度点击事件？

你能给我一个例子吗？

谢谢

BTD

【问题讨论】：

【解决方案1】：

最好的解决方案是在函数中声明这些调用，这样它们就不会在页面加载时被调用，然后只调用控制器中的初始选项卡函数。控制器中的内容如下：

$scope.Tab1 = function() {...};
$scope.Tab2 = function() {...};
$scope.Tab3 = function() {...};
$scope.Tab1();

然后在选项卡本身上，您只需使用ng-click 方法来触发其他数据的加载：

<a href="#tab2" ng-click="Tab2()">Tab 2</a>

【讨论】：