AngularJS обнаруживает среду Bootstrap

Question

Я пытаюсь использовать AngularJS для обнаружения среды бутстрапа. Это мой код:

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'; 
      } 
     } 

    } 

Функция работает и возвращает значение в зависимости от размера окна. Тем не менее, он всегда будет возвращать ту же среду, даже если размер окна будет изменен. Как я могу это исправить?

Answer 1

Вам необходимо посмотреть событие изменения размера окна.

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); 
     } 
    }); 

} 
]);