Событие AngularJS при изменении размера внутренней вилки окна

Ответ 1

Мы могли бы сделать это с помощью jQuery:

$(window).resize(function(){
    alert(window.innerWidth);

    $scope.$apply(function(){
       //do something to update current scope based on the new innerWidth and let angular update the view.
    });
});

Помните, что когда вы привязываете обработчик событий внутри областей, которые могут быть воссозданы (например, области действия ng-repeat, области действия директивы...), вы должны развязать обработчик событий при уничтожении области, Если вы этого не сделаете, каждый раз, когда область воссоздается (контроллер перезапускается), добавляется еще один обработчик, вызывающий неожиданное поведение и утечку.

В этом случае вам может понадобиться определить ваш прикрепленный обработчик:

  $(window).on("resize.doResize", function (){
      alert(window.innerWidth);

      $scope.$apply(function(){
          //do something to update current scope based on the new innerWidth and let angular update the view.
      });
  });

  $scope.$on("$destroy",function (){
      $(window).off("resize.doResize"); //remove the handler added earlier
  });

В этом примере я использую пространство имен событий из jQuery. Вы можете сделать это по-другому в соответствии с вашими требованиями.

Улучшение. Если обработчик события занимает много времени, чтобы избежать проблем, которые пользователь может изменить размер окна, заставляя обработчики событий запускаться много раз, мы могли бы рассмотреть дросселирование. Если вы используете underscore, вы можете попробовать:

$(window).on("resize.doResize", _.throttle(function (){
    alert(window.innerWidth);

    $scope.$apply(function(){
        //do something to update current scope based on the new innerWidth and let angular update the view.
    });
},100));

или debouncing:

$(window).on("resize.doResize", _.debounce(function (){
     alert(window.innerWidth);

     $scope.$apply(function(){
         //do something to update current scope based on the new innerWidth and let angular update the view.
     });
},100));

Разница между дросселированием и дебютом функции

Ответ 2

Не нужно jQuery! Этот простой снипп отлично работает для меня. Он использует angular.element() для привязки события изменения размера окна.

/**
 * Window resize event handling
 */
angular.element($window).on('resize', function () {
    console.log($window.innerWidth);
});

Ответ 3

Я нашел jfiddle, который может помочь здесь: http://jsfiddle.net/jaredwilli/SfJ8c/

Ive реорганизовал код, чтобы упростить это.

// In your controller
var w = angular.element($window);
$scope.$watch(
  function () {
    return $window.innerWidth;
  },
  function (value) {
    $scope.windowWidth = value;
  },
  true
);

w.bind('resize', function(){
  $scope.$apply();
});

Затем вы можете ссылаться на windowWidth из html

<span ng-bind="windowWidth"></span>

Ответ 4

Если решение Khanh TO вызвало проблемы с пользовательским интерфейсом (например, для меня), попробуйте использовать $timeout, чтобы не обновлять атрибут до тех пор, пока он не изменится на 500 мс.

var oldWidth = window.innerWidth;
$(window).on('resize.doResize', function () {
    var newWidth = window.innerWidth,
        updateStuffTimer;

    if (newWidth !== oldWidth) {
        $timeout.cancel(updateStuffTimer);
    }

    updateStuffTimer = $timeout(function() {
         updateStuff(newWidth); // Update the attribute based on window.innerWidth
    }, 500);
});

$scope.$on('$destroy',function (){
    $(window).off('resize.doResize'); // remove the handler added earlier
});

Ссылка: https://gist.github.com/tommaitland/7579618