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请求该服务。您只有在首次访问该标签后才需要数据：

例如您的服务

document

您的控制器

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

    this.firstTabData =  null;

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

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

单击“仅首次运行控制器”选项卡-AngularJS

1 个答案: