改善慢角指令

Question

我有一个页面,根据窗口宽度呈现表视图或div/blocks视图.但是观点之间的交流发生得非常缓慢.也许我不是以最好的方式做事？

我基本上有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();
            })
        }
    }
}]);

Answer 1

您遇到的缓慢可能是因为在调整窗口大小后,不会触发摘要周期.我怀疑视图发生变化这一事实是由于摘要周期后来由其他东西触发的事实.

要解决此问题,您可以scope.$apply()在resize处理程序内部调用:

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