运行仅控制器第一次单击选项卡 - AngularJS

Question

我正在为我们公司开发一个网站，其中一个页面包含几个选项卡:

我希望每个选项卡只执行一次加载操作，而不是每次单击它时都执行一次，因为这些选项卡有一些 API 调用，重新加载需要时间。

最好的方法是什么？我正在使用 Ui-router 和 ui-sref 在每个选项卡之间移动：

<div class="col-xs-2">
        <div class="panel panel-default">
            <div class="list-group panel panel-default">

                <a ui-sref="dashboards.firstTab" ui-sref-active="active" class="list-group-item" id="firstTab_button">
                    <i style="color:darkblue" class="fa fa-area-chart"></i>&nbsp; TAB1 </a>

                <a ui-sref="dashboards.secondTab" ui-sref-active="active" class="list-group-item" id="secondTab_button">
                    <i style="color:darkblue" class="fa fa-line-chart"></i>&nbsp; TAB2 </a>

                <a ui-sref="dashboards.thirdTab" ui-sref-active="active" class="list-group-item" id="thirdTab_button">
                    <i style="color:darkblue" class="fa fa-server"></i>&nbsp; TAB3 </a>

            </div>
        </div>
    </div>




<div ui-view class="col-xs-12">

            <div class="row">
                <div class="col-xs-12" ng-if="vm.isTabOneSelected">
                    <div ng-include src="'components/Cards/Tabs/TabOne/TabOne.html'"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12" ng-if="vm.isTabTwoSelected">
                    <div ng-include src="'components/Cards/Tabs/TabTwo/TabTwo.html'"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12" ng-if="vm.isTabThreeSelected">
                    <graph-panel  panel-title="TabThree {{vm.isTabThreeSelected}}" chart-config="vm.charts.TabOneChartSite"></graph-panel>
                </div>
            </div>

        </div>

Answer 1

在每个控制器上，您可以将加载的数据缓存在服务中，当您加载控制器时，您将首先检查此服务，如果它没有数据，然后您将从您的 API 请求它，在在这种情况下，您只有在第一次访问该选项卡时才请求您的数据：

例如。您的服务

app.service('dataService', function() {

    this.firstTabData =  null;

    this.getFirstTabData = function () {
        return this.firstTabData;
    };

    this.setFirstTabData = function (data) {
        this.firstTabData = data;
    };
});

你的控制器

app.controller('tabOne', function($scope, dataService) {
    $scope.data = {};

    $scope.load = function () {
        if(dataService.getFirstTabData()) {
            $scope.data = dataService.getFirstTabData();
        }
        else {
            $scope.data = getDataFromAPI();
        }

    };

    var getDataFromAPI = function () {
         //get your data 

         dataService.setFirstTabData(dataFromAPI);
    };


});

运行仅控制器第一次单击选项卡 - AngularJS

Run controller only first time tab was clicked - AngularJS

html

angularjs

angular-ui-router

运行 仅控制器第一次单击选项卡 - AngularJS

Run controller only first time tab was clicked - AngularJS

html

angularjs

angular-ui-router

运行仅控制器第一次单击选项卡 - AngularJS