javascript - 改善慢 Angular 方向

Question

我有一个页面，根据窗口宽度呈现 TableView 或 div/ block View 。但观点之间的交换发生得非常缓慢。也许我没有以最好的方式做事？

我基本上在 Controller 中定义了 2 个作用域变量( block 和表，设置为 true 或 false)。

我有一个在窗口调整大小时触发的指令，根据这个宽度，我将 Controller 范围变量设置为 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>

Controller :

 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();
            })
        }
    }
}]);

Answer 1

您遇到的速度缓慢可能是由于调整窗口大小后未触发摘要周期所致。我怀疑 View 发生变化的事实是由于摘要周期后来被其他原因触发。

要解决此问题，您可以在调整大小处理程序中调用 scope.$apply():

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