JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<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>

CSS

.fess { border:1px solid red; }

JavaScript

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 as resize event
         // is outside of angular
         scope.$digest();
       });
    }
});