使用MD-ON-选择在角材料的MD-标签延迟UI

Question

我使用md-on-select与Angular Materialmd-tab，我传递给md-on-select = "function()"一个函数，它包含了在那个特定的标签视图中加载数据的AJAX调用。但是这延缓了标签之间的转换（default action）。

注意：观察者在选项卡上激活的粉红线（click me），它在我的情况下被延迟了，我认为这可能是由于我在函数中写入的ajax调用传递给了md-on-select 。

是否有任何工作可以在标签之间平滑过渡？

HTML

<md-content> 
     <md-tabs md-dynamic-height="" md-border-bottom=""> 
      <md-tab label="Tab1" md-on-select="fnTab1Data()"></md-tab> 
      <md-tab label="Tab2" md-on-select="fnTab2Data()"></md-tab> 
      <md-tab label="Tab3" md-on-select="fnTab3Data()"></md-tab> 
      <md-tab label="Tab4" md-on-select="fnTab4Data()"></md-tab> 
     </md-tabs> 
    </md-content> 

控制器

angular.module('myModule') 
     .controller('myCtrl', ['$scope', 'myService', 
      function($scope, jobDescriptionService) { 
       $scope.fnTab1Data = function() { 
        myService.fnGetTab1Data(id).then(function(response) { 
         $scope.oTab1Data = response; 
        }); 
       }; 
       $scope.fnTab2Data = function() { 
        myService.fnGetTab2Data(sdata).then(function(response) { 
         $scope.oTab2Data = response; 
        }); 
       }; 
       $scope.fnTab3Data = function() { 
        myService.fnGetTab3Data().then(function(response) { 
         $scope.oTab3Data = response; 
        }); 
       }; 
       $scope.fnTab4Data = function() { 
        myService.fnGetTab4Data().then(function(response) { 
         $scope.oTab4Data = response; 
        }); 
       }; 
      } 
     ]) 

Answer 1

一些提示，以提高MD-标签

1. 添加属性MD-禁止动画的性能上MD-标签
2. 如果你是按需做内部MD-选项卡上的大数据集NG-重复
   • 使用NG-无限滚动和加载数据
   • 使用NG-通过追踪重复

代码

<md-tabs md-disable-animation md-swipe-content="true" md-selected="selectedIndex"> 

    <md-tab label="first"> 
     <!--on demand list--> 
     <div id="first-tab"> 
     <div infinite-scroll="addMore()" infinite-scroll-distance='2' infinite-scroll-container="'#first-tab'"> 
       <div ng-repeat="one in all track by one._id" 
        <!-- your code --> 
       </div> 
      </div> 
     </div> 
    </md-tab> 

<!-- other tabs --> 
</md-tabs> 

个

一些有用的链接：

• ngInfinite文档here
• 检查提高您的角度应用性能here

这真棒articel