AngularJS 检测 Bootstrap 环境

Question

我正在尝试使用 AngularJS 检测 bootstrap 环境。这是我的代码：

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

    }

函数有效，return 值基于 window 大小。但是，即使 window 大小发生变化，它也总是 return 相同的环境。我该如何解决？

Answer 1

您需要注意 window 调整大小事件。

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

}
]);

AngularJS 检测 Bootstrap 环境

AngularJS detect Bootstrap Environment

window-resize

twitter-bootstrap

angularjs