使用 AngularJS 在 Bootstrap 选项卡中重新加载数据
Posted
技术标签:
【中文标题】使用 AngularJS 在 Bootstrap 选项卡中重新加载数据【英文标题】:Using AngularJS to reload data in Bootstrap tabs 【发布时间】:2013-11-08 04:24:11 【问题描述】:我的 Angular 页面上有两个 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 中定义了自己的控制器。这两个选项卡有自己的数据和业务逻辑,但如果用户在第二个选项卡上更改服务器上的数据,则应从服务器重新加载第一个选项卡的内容(或至少在用户转到第一个选项卡时)。
单击选项卡时,当然不会发生重新加载,因为控制器已经被实例化了。只有当控制器再次初始化时,页面上的浏览器刷新后才会重新加载数据。
点击 Tab 1 时有没有办法重新加载控制器?我也可以将两个子控制器组合成一个,但这对于我的问题来说听起来像是一种肮脏的解决方法。
【问题讨论】:
【参考方案1】:您可以编写一个指令来监听来自引导 jquery 插件的事件(请参阅 docs),或者使用像 angular-strap 这样的集成库来为您完成它。然后,只需注意事件(或模型更改)并使用来自服务器的数据更新您的范围。
【讨论】:
【参考方案2】:不要考虑重新加载控制器,而是考虑简单地刷新控制器范围内的数据。一个控制器可以通过多种方式与另一个控制器通信(即广播/发射事件、使用共享服务或更改公共范围)。每当控制器执行需要为另一个控制器刷新数据的操作时,您只需使用这些可用方法之一通知另一个控制器执行 ajax 请求并在其范围内设置新值。
【讨论】:
【参考方案3】:让更改数据的控制器广播一个事件,让需要更新的控制器监听该事件。该活动必须在$rootScope
上播出:
改变数据的控制器:
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)。
【讨论】:
谢谢,所有答案都很棒。 :) 我想我会选择上面的内容。【参考方案4】:在标签锚中添加data-tabname="tabName"
,在标签显示时监听引导程序触发的shown.bs.tab
事件并启动数据刷新服务进行更新。
简单的例子:
$('a[data-toggle="tab"]').on('shown.bs.tab', this.showTabHandler.bind(this));
function showTabHandler(event)
switch (event.target.dataset.tabname)
case 'tab1':
this.refreshTab1();
break;
case 'tab2':
this.refreshTab2();
break;
default:
console.log('Unknown tab switched.', event.target.dataset.tabname);
工作演示链接:https://codepen.io/arpi-t/pen/WBbQOQ
【讨论】:
以上是关于使用 AngularJS 在 Bootstrap 选项卡中重新加载数据的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 AngularJS 使用 Bootstrap 警报
使用 AngularJS 在 Bootstrap 选项卡中重新加载数据
bootstrap tooltips在 angularJS中的使用
使用 ui-bootstrap 显示在右上角的警报,使用 Angularjs 进行引导