AngularJS detect Bootstrap Environment - angularjs

Question

I am trying to use AngularJS to detect bootstrap environment. This is my code:
angular.module("envService",[])
.factory("envService", envService);
function envService($window){
return env();
////////////
function env(){
var w = angular.element($window);
var winWidth = w.width();
if(winWidth<768){
return 'xs';
}else if(winWidth>=1200){
return 'lg';
}else if(winWidth>=992){
return 'md';
}else if(winWidth>=768){
return 'sm';
}
}
}
The function works and return the value based on the window size. However, it will always return the same environment even if the window size is changed. How can I fix it?

Answer 1

You need to watch for the window resize event.
angular.module('envService',[])
.factory('envFactory', ['$window', '$timeout', function($window, $timeout) {
var envFactory = {};
var t;
envFactory.getEnv = function () {
var w = angular.element($window);
var winWidth = w.width();
if(winWidth<768){
return 'xs';
}else if(winWidth>=1200){
return 'lg';
}else if(winWidth>=992){
return 'md';
}else if(winWidth>=768){
return 'sm';
}
};
angular.element($window).bind('resize', function () {
$timeout.cancel(t);
t = $timeout(function () {
return envFactory.getEnv();
}, 300); // check if resize event is still happening
});
return envFactory;
}]);
angular.module('app',['envService']).controller('AppController', ['$scope', 'envFactory',
function($scope, envFactory) {
// watch for changes
$scope.$watch(function () { return envFactory.getEnv() }, function (newVal, oldVal) {
if (typeof newVal !== 'undefined') {
$scope.env = newVal;
console.log($scope.env);
}
});
}
]);