Question

我的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时有没有办法重新加载控制器？我还可以将两个子控制器合并为一个，但这听起来像是我的问题的一个肮脏的解决方法。

Answer 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();
    }
});

活动标志的实现取决于您使用的工具包（使用Bootstrap，我建议使用Angular UI Bootstrap）。

Answer 2

您可以编写一个从bootstrap jquery插件中侦听事件的指令（请参阅docs），或者使用像angular-strap这样的集成库。然后，只需观察事件（或对模型的更改）并使用服务器中的数据更新范围。

Answer 3

不要在重新加载控制器方面考虑它，而是考虑简单地刷新控制器范围内的数据。一个控制器可以与另一个控制器通信的方式有很多种（即广播/发射事件，使用共享服务或改变共同范围）。每当控制器执行需要为另一个控制器刷新数据的操作时，您只需使用这些可用方法之一来通知另一个控制器执行ajax请求并在其范围内设置新值。

Answer 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);
    }
}

有效的演示链接：lifecycle

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

4 个答案: