Bootstrap的选项卡控件触发所有选项卡的代码

Question

我在我的Angular 1.5.8 MVC asp.net Web应用程序上使用Bootstrap 3.0选项卡条。

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

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

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

此外，有没有办法将角度单击事件附加到每个选项卡？

你可以给我一个例子。

感谢

BTD

Answer 1

最好的解决办法是在函数中调用这些声明，因此他们不会在页面加载时被调用，然后只调用控制器中的初始选项卡的功能。就像在你的控制器下面的内容：

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

，然后在自己的标签，您将只需使用ng-click方法来触发其他数据的加载：

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