Question

我在页面上有多个标签用于不同的状态。每个标签都有自己的ui-grid，并由ng-include包含。示例代码如下。

 <tab heading="@L("Incomplete")">
        <div ng-include="'~/App/common/views/incentives/incomplete.cshtml'"></div>
    </tab>

    <tab heading="@L("PendingApproval")">
        <div ng-include="'~/App/common/views/incentives/pendingApproval.cshtml'"></div>
    </tab>

    <tab heading="@L("AwaitingTracker")">
        <div ng-include="'~/App/common/views/incentives/awaitingtracker.cshtml'"></div>
    </tab>

    <tab heading="@L("DistributedToSales")">
        <div ng-include="'~/App/common/views/incentives/distributed2sales.cshtml'"></div>
    </tab>

我想实现以下功能。

当我们关注数据时，每个标签都会加载数据。
现在所有选项卡都在同时加载数据，但所有ui-grid都没有加载数据。只有第一个网格加载数据。请参阅此视频http://screencast.com/t/HM0cfjOgCK

Answer 1

您可以尝试在select：

上重新加载标签内容

<tab heading="@L("AwaitingTracker")" select="reload()">
        <div ng-include="'~/App/common/views/incentives/awaitingtracker.cshtml'"></div>
    </tab>

<script>

function reload(){
 if($scope.tabs[tabIndex].isLoaded){
      return
    }
    /* or make request for data , delayed to show Loading... vs cache */
    $timeout(function(){
        var jsonFile='data'+(tabIndex +1)+'.json'
        $http.get(jsonFile).then(function(res){
            $scope.tabs[tabIndex].content=res.data;
            $scope.tabs[tabIndex].isLoaded=true;
        });

    }, 2000)
}

</script>

我没有检查这个reload（）方法是否正常，但我在选项卡中的滑块有同样的问题。使用刷新滑块使用超时时，它会显示init值correclty。检查此重新加载选项卡：tabs with angular: loading tab content on click only with $http

使用ng-include添加多个ui-grid

1 个答案: