调用ng-click时Md-tab冻结

时间:2016-09-28 12:59:08

标签: angularjs angular-material

我几天前请求帮助,为什么我的ng-repeat如此缓慢,我设法找出原因。我有3个md-tabs,点击它们来点击刷新我的数据,问题是在标签更改之前执行了ng-click,这导致了一些冻结。试图使用md-on-select,它会导致同样的问题。

使用for循环只是为了演示问题,在我的情况下冻结我使用http get ..

制作一个帮助你们的小伙伴:https://jsfiddle.net/twizzlers/vvstgg4g/3/

我的HTML:

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
     <md-tabs md-dynamic-height md-border-bottom md-selected="selected_tab">
        <md-tab label="zero" ng-click="load(0)">
           <md-content class="md-padding">
             <div ng-show="selected_tab == 0">
               <div ng-include="'list1.html'"></div>
             </div>
           </md-content>
        </md-tab>
        <md-tab label="one" ng-click="load(1)">
            <md-content class="md-padding">
               <div ng-show="selected_tab == 1">
                  <div ng-include="'list2.html'"></div>
               </div>
            </md-content>
        </md-tab>
        <md-tab label="two" ng-click="load(2)">
           <md-content class="md-padding">
               <div ng-show="selected_tab == 2">
                   <div ng-include="'list3.html'"></div>
               </div>
           </md-content>
        </md-tab>
     </md-tabs>

  </div>
</div>

<script type="text/ng-template" id="list1.html">
    <div ng-if="showSpinner" layout="row" layout-align="center start">
       <p></p>
       <md-progress-circular ng-if="showSpinner" md-diameter="70">      </md-progress-circular>
    </div>
    <div ng-repeat="item in default_list">
       <p>{{item.test}}</p>
    </div>
  </script>

  <script type="text/ng-template" id="list3.html">
     <div ng-if="showSpinner" layout="row" layout-align="center start">
     <p></p>
        <md-progress-circular ng-if="showSpinner" md-diameter="70"></md-progress-circular>
     </div>
     <div ng-repeat="item in default_list">
         <p>{{item.test}}</p>
     </div>
  </script>

  <script type="text/ng-template" id="list2.html">
     <div ng-if="showSpinner" layout="row" layout-align="center start">
         <p></p>
         <md-progress-circular ng-if="showSpinner" md-diameter="70"></md-progress-circular>
     </div>
     <div ng-repeat="item in default_list">
         <p>{{item.test}}</p>
     </div>
  </script>

我的控制员:

var myApp = angular.module('myApp',['ngMaterial']);

myApp.controller("MyCtrl", ["$scope","$rootScope", "$mdDialog","$mdPanel",'$filter', '$http', function($scope, $rootScope, $mdDialog, $mdPanel, $filter, $http){

  $scope.default_list = [];

    $scope.list0 = [{test:"test111"}, {test2:"test2"}, {test3:"test3"}];
    $scope.list1 = [{test:"test222"}, {test2:"test2"}, {test3:"test3"}];
    $scope.list2 = [{test:"test333"}, {test2:"test2"}, {test3:"test3"}];

  $scope.load = function(selected){
    for(var i= 0; i < 2000; i++){
        console.log("test");
    }
    $scope.showSpinner = true;
    $http.get('/echo/json').then(function(value) {
        $scope.showSpinner = false;
            if(selected == 0){
               $scope.default_list = $scope.list0;
            }else if(selected == 1){
               $scope.default_list = $scope.list1;
            }else if(selected == 2){
               $scope.default_list = $scope.list2;
            }
        });
     }

     $scope.load(0);

   }
]);

这是否有解决方案或目前这是一个错误?

0 个答案:

没有答案