大佬教程收集整理的这篇文章主要介绍了使用AngularJS在Bootstrap选项卡中重新加载数据，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<div>
<ul class="nav nav-tabs">
<li class="active strong">
<a data-target="#home" data-toggle="tab">Tab 1</a>
</li>
<li class="strong">
<a data-target="#pairs" data-toggle="tab">Tab 2</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<div ng-include="partial_1.html"></div>
</div>
<div class="tab-pane fade" id="pairs">
<div ng-include="partial_2.html"></div>
</div>
</div>
</div>
两个部分都有自己的控制器在partial_X.html中定义.这两个选项卡有自己的数据和业务逻辑,但如果用户在第二个选项卡上更改服务器上的数据,则应从服务器重新加载第一个选项卡的内容(或至少在用户转到第一个选项卡时).
单击选项卡时,当然不会重新加载,因为控制器已经实例化.只有在控制器再次初始化后,@L_673_0@上的浏览器刷新后才会重新加载数据.
有没有办法在单击Tab 1时重新加载控制器？我也可以将两个子控制器组合成一个,但这听起来像是我的问题的一个肮脏的解决方法.
更改数据的控制器：
changeData().then(function() { $rootScope.$broadcast("importandDataChanged"); });
需要更新的控制器：
$scope.$on("importandDataChanged",function() {
// signal that data changed,lazy load when the tab is actually clicked
$scope.importantData = null;
});
// let $scope.active be a flag that is true when the tab is active
$scope.$watch("active",function(newvval) {
if( newval && $scope.importantData === null ) {
loadData();
}
});
active标志的实现取决于你正在使用的工具包(使用Bootstrap,我建议使用Angular UI Bootstrap).
以上是大佬教程为你收集整理的使用AngularJS在Bootstrap选项卡中重新加载数据全部内容，希望文章能够帮你解决使用AngularJS在Bootstrap选项卡中重新加载数据所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。