改善慢角度指令

我有一個頁面根據窗口寬度呈現表視圖或div /塊視圖。但是視圖之間的swop非常緩慢。也許我不是以最好的方式做事情？改善慢角度指令

我基本上有2個範圍變量（塊和表，設置爲true或false）在控制器中定義。

我有一個指令，觸發窗口調整大小，並根據這個寬度我將設置控制器範圍變量爲true或false。

該模板根據範圍變量的ng-if條件呈現表或div。

模板：

<div view-controll ng-controller="viewController"> 

    <div ng-if="table==true" id="tableView"> 
    <div class="table-responsive"> 
     <table class="table table-striped table-condensed"> 
     <tbody> 
      <tr class="tableRowsDocs" ng-repeat="dbo in rows"> 
      //data 
      </tr> 
     </tbody> 
     </table> 
    </div> 
    </div> 

    <div ng-if="block==true" id="mobileView"> 
    <div class="col-xs-12 col-sm-6 col-md-3" ng-repeat="dbo in rows"> 
    //data 
    </div> 
    </div> 

</div>

控制器：

app.controller('viewController', function($scope) { 
     $scope.block = false; 
     $scope.table = true; 
    });

指令：

app.directive('viewControll', ['$window', function($window) { 
    return { 
     link: function(scope, elem, attrs) { 
      scope.onResize = function() {    
       if (window.innerWidth > 700){ 
        scope.block = false; 
        scope.table = true; 
       } else{ 
        scope.block = true; 
        scope.table = false; 
       } 
      } 
      scope.onResize(); 
      angular.element($window).bind('resize', function() { 
       scope.onResize(); 
      }) 
     } 
    } 
}]);

來源

2015-06-22 Al Ex Tsm

您遇到可能是由於這樣的事實，之後的窗口已經被調整的緩慢，摘要週期不會被觸發。事實上，我認爲視圖發生了所有變化，這是由於消化週期後來由其他事件觸發的事實。

爲了解決這個問題，你可以撥打scope.$apply()調整大小處理程序中：

angular.element($window).bind('resize', function() { 
    scope.resize(); 
    scope.$apply(); 
});

來源

2015-06-22 11:27:52

是的，這是它！謝謝！ –

您應該使用$evalAsync。

避免使用$apply，因爲它調用$ digest循環並執行應用程序中所有可用作用域的整個監視器列表，這可能會導致性能問題。

例子：

scope.$evalAsync(function() { 
    scope.resize(); 
});

來源

2017-12-11 13:49:04 romeromedeiros

改善慢角度指令

回答

相關問題