0
I’m building an application where I rely on ngClass to change the class of elements. The problem is that I’m not able to do with ngClass interpret a change in screen width (concept of responsiveness).
I know I can do it using the $scope.$watchin another directive but I intend to keep the maximum control already native in Angularjs. Is there any way to make ngClass identify that there has been a change in page width and reevaluate its condition?
4
You can define the following function within the .run
.run(function($window, $timeout, $rootScope) {
var timer;
function verificaTela() {
var width = $window.innerWidth;
if(width < 600) {
$rootScope._isMobile = true;
} else {
$rootScope._isMobile = false;
}
}
//Chama a função quando mudar o tamanho da tela
angular.element($window).on('resize', function() {
$timeout.cancel(timer);
timer = $timeout(verificaTela, 600);
})
//Chama a função no primeiro load
verificaTela();
});
I prefer to declare within the .run because it is executed right at the beginning of the application, therefore, when your DOM starts to be structured, the value will already be available.
Then just do the checks with ngClass, for example:
<div ng-class="{'classeMobile': _isMobile}"></div>
//ou assim
<div ng-class="_isMobile ? 'classeMobile' : 'classeDesktop'"></div>
Browser other questions tagged angularjs
You are not signed in. Login or sign up in order to post.
but so you are checking on an application that checks while loading and not on a sudden screen change. imagine that at some point your user modigica the browser, leaving the same in half screen. that way, It still doesn’t work
– LeandroLuk
in addition, by running, Voce exits the event scope from actions, so you can’t test this on a real user
– LeandroLuk
@Leandroluk
angular.element($window).on('resize', function() {This here does the checking when the user changes the browser screen. I use the.runbecause I also need to know the screen size in the initial state. Later, if the user changes the browser dimension, it will continue to be analyzed. Also, I created a timer check to run the function only 600ms after the user has finished resizing, rather than running every px he changes. The verification logic used true or false, but you can use other– celsomtrindade
I understand that this way I would be leaving the scope of the ngClass function. in addition, by convention what I seek should be worked through a directive to improve scalability. In the way you thought it works, but it’s not scalable. I’m looking for something that Angular 1 already has, but from what I’ve seen I’m compelled to generate a new directive.
– LeandroLuk
The principle is the same, just you migrate the function of
element($window).on('resize');for the directive and use it. As said, using in run is a preference, but you can use it peacefully in Directive– celsomtrindade