使用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