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') }); } } }]);
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
Post a Comment