异步加载内容 md-tabs答案

【问题标题】：Load content md-tabs asynchronous异步加载内容 md-tabs
【发布时间】：2016-09-12 13:03:56
【问题描述】：

我正在为 Ios 开发一个跨平台应用程序，使用 Cordova 和 Angular Material。

我的主页有三个选项卡，每个选项卡中的内容将从 Web 服务加载。

我的问题是，当我在 Ios 中构建应用程序时，每次我在选项卡之间切换时，过渡并不顺畅。加载数据有延迟时间。

有什么方法可以异步加载每个选项卡中的数据，以便立即执行切换转换，稍后更新内容数据。

【问题讨论】：

是否可以一次性加载所有内容，在选择选项卡时只传递选项卡内容所需的数据？
抱歉，我不太明白你的意思。您的意思是当应用程序加载时，我将加载所有选项卡的所有数据以及选择选项卡时，我将更新此选项卡的此数据？ span>
是的，在启动时加载所有选项卡的所有数据。选择选项卡时，仅将内容所需的数据传递给选项卡内容。如果您愿意，我可以在答案中提供更多详细信息。
是的，请。欢迎所有帮助。我是 Angular js 的新手

标签： angularjs cordova tabs angular-material

【解决方案1】：

这是一个从我的评论扩展而来的示例 - CodePen

它演示了将特定数据从所有数据传递到特定选项卡内容的能力。还有许多其他方法可以达到相同的结果。

标记

<div ng-cloak="" class="tabsdemoDynamicHeight" ng-app="MyApp" ng-controller="MyController as vm">
  <md-content>
    <md-tabs md-dynamic-height="" md-border-bottom="" md-selected="vm.selectedIndex">
      <md-tab label="one">
        <md-content class="md-padding">
          <content data="vm.allData[vm.selectedIndex]"></content>
        </md-content>
      </md-tab>
      <md-tab label="two">
        <md-content class="md-padding">
          <content data="vm.allData[vm.selectedIndex]"></content>
        </md-content>
      </md-tab>
      <md-tab label="three">
        <md-content class="md-padding">
          <content data="vm.allData[vm.selectedIndex]"></content>
        </md-content>
      </md-tab>
    </md-tabs>
  </md-content>
</div>

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller("MyController", function () {
  this.allData = [
    "John", "Paul", "George"
  ];
})

.directive("content", function() {
  return {
    template: "<div>{{data}}</div>",
    scope: {data: "="}
  }
});

【讨论】：