I am facing an issue with the speed at which my page switches between table view and div/block view based on window width. I suspect there might be a more efficient way to handle this process?
In my controller, I have defined two scope variables (block and table) that are set to true or false.
There is a directive triggered by window resize events that updates these scope variables based on the window width.
The template renders either a table or divs depending on the ng-if condition of the scope variables.
Template:
<div view-control 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;
});
Directive:
app.directive('viewControl', ['$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();
})
}
}
}]);