Bootstrap的Tab Control会触发所有选项卡的代码

Question

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

目前我有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>