angularjs - Define and Watch a variable according to windowidth -
i'm struggling creating directive assign , update variable, compares window width, , updates resize.
i need variable compared using css because work ng-if. bare me, i'm new this. doing wrong? here code:
var app = angular.module('miniapp', []); function appcontroller($scope) {}
app.directive('widthcheck', function ($window) { return function (scope, element, attr) { var w = angular.element($window); scope.$watch(function () { return { 'w': window.innerwidth }; }, function (newvalue, oldvalue, desktopplus, ismobile) { scope.windowwidth = newvalue.w; scope.desktopplus = false; scope.ismobile = false; scope.widthcheck = function (windowwidth, desktopplus) { if (windowwidth > 1399) { scope.desktopplus = true; } else if (windowwidth < 769) { scope.ismobile = true; } else { scope.desktopplus = false; scope.ismoblie = false; } } }, true); w.bind('resize', function () { scope.$apply(); }); } }); jsfiddle here: http://jsfiddle.net/h8m4eaem/2/
as mentioned in so answer it's better bind window resize event with-out watch. (similar mr. berg's answer.)
something in demo below or in fiddle should work.
var app = angular.module('miniapp', []); function appcontroller($scope) {} app.directive('widthcheck', function($window) { return function(scope, element, attr) { var width, detectfalse = { desktopplus: false, istablet: false, ismobile: false }; scope.windowwidth = $window.innerwidth; checksize(scope.windowwidth); // first run //scope.desktopplus = false; //scope.ismoblie = false; // typo //scope.istablet = false; //scope.ismobile = false; function resetdetection() { return angular.copy(detectfalse); } function checksize(windowwidth) { scope.detection = resetdetection(); if (windowwidth > 1000) { //1399) { scope.detection.desktopplus = true; } else if (windowwidth > 600) { scope.detection.istablet = true; } else { scope.detection.ismobile = true; } } angular.element($window).bind('resize', function() { width = $window.innerwidth; scope.windowwidth = width checksize(width); // manuall $digest required resize event // outside of angular scope.$digest(); }); } });.fess { border: 1px solid red; }<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="miniapp" ng-controller="appcontroller"> <div width-check class="fess" resize> window.width: {{windowwidth}} <br />desktop plus: {{detection.desktopplus}} <br />mobile: {{detection.ismobile}} <br />tablet: {{detection.istablet}} <br/> </div> </div>
Comments
Post a Comment