使用AngularJS在Bootstrap选项卡中重新加载数据

发布时间：2020-12-17 17:12:54 所属栏目：安全来源：网络整理

导读：我的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="myT

我的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时重新加载控制器？我也可以将两个子控制器组合成一个,但这听起来像是我的问题的一个肮脏的解决方法.

解决方法

让更改数据的控制器广播事件,需要更新的控制器监听该事件.该事件必须在$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).

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!