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

Janne 发表于 Dev

肌腱

我的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>

两个partials都在partial_X.html中定义了自己的控制器。这两个选项卡具有自己的数据和业务逻辑，但是如果用户在第二个选项卡上时在服务器上更改数据，则应从服务器重新加载第一个选项卡的内容（或至少在用户转到第一个选项卡时）。

单击选项卡后，当然不会发生重新加载，因为控制器已被实例化。仅当浏览器刷新页面后才重新加载数据，因为控制器已再次初始化。

单击选项卡1时，是否可以重新加载控制器？我也可以将两个子控制器组合为一个，但这听起来像是解决我的问题的肮脏方法。

尼科斯（Nikos Paraskevopoulos）

让更改数据的控制器广播一个事件，而需要更新的控制器监听该事件。该活动将在以下位置播出$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）。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。