javascript - ng-class $window.innerWidth -


i trying find solution add class item if screen width greater x (ie. 1200).

ng-class="{ large: islarge() }"  $scope.islarge = function () {   return ($window.innerwidth >= 1200); } 

this doesn't work, , wont add class. needs update on browser resize. thinking directive might better option.

edit: don't want hear if should done, if can done.

you could this. have crafted directive example accomplishes this. chose width of 500 in example easier jsfiddle demo. check out following...

<div class="item" resizer></div> 

.item {     background-color: tomato;     height: 100px;     width: 100px; }  .large {     background-color: dodgerblue; } 

app.directive('resizer', ['$window', function ($window) {     return {         restrict: 'a',         link: function (scope, elem, attrs) {                         angular.element($window).on('resize', function () {                 $window.innerwidth > 500 ?                      elem.addclass('large') : elem.removeclass('large')             });         }     } }]); 

jsfiddle example

furthermore, if wish leverage ng-class solution, give following shot...

<div class="item" resizer ng-class="{ 'large': islarge }"></div> 

app.directive('resizer', ['$window', function ($window) {     return {         restrict: 'a',         link: function (scope, elem, attrs) {                   angular.element($window).on('resize', function () {                 scope.$apply(function(){                     scope.islarge = $window.innerwidth > 500 ? true : false;                 })             });         }     } }]); 

jsfiddle example - ng-class


Comments

Popular posts from this blog

python - TypeError: start must be a integer -

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

django - Creating multiple model instances in DRF3 -