AngularJS-如何检测窗口调整大小+横向/纵向改变事件

Question

我一直在尝试可以在SO上找到的其他一些建议，但没有一个起作用。 基本上，当窗口大小更改时，我需要更新（重新渲染）自定义指令。

我的代码如下：

angular.module('dynamicSlideBox', []).directive('hgDynamicSlideBox', [
  '$timeout', '$ionicSlideBoxDelegate', '$ionicScrollDelegate', '$window', function($timeout, $ionicSlideBoxDelegate, $ionicScrollDelegate, $window) {
    var linkFunction;
    linkFunction = function(scope, element, attrs, parent) {
      var disableScroll, ionContent, ionContentDelegate, ionicSlideBoxDelegate, modal, slideChanged, slideHandle, slider;
      slider = angular.element(element);
      modal = slider.closest('.popup-body');
      ionContent = slider.closest('.hg-dynamic-content');
      ionContentDelegate = ionContent.attr('delegate-handle');
      slideHandle = slider.attr('delegate-handle');
      ionicSlideBoxDelegate = $ionicSlideBoxDelegate;
      ionicSlideBoxDelegate.$getByHandle(slideHandle).enableSlide(false);
      if (slideHandle) {
        ionicSlideBoxDelegate = ionicSlideBoxDelegate.$getByHandle(slideHandle);
      }
      disableScroll = JSON.parse("[" + attrs.disableSlideScroll + "]");
      slideChanged = function() {
        $timeout((function() {
          $ionicScrollDelegate.resize();
        }), 50).then(function() {
          var currSlide, maxHeight, maxWidth, slideContents, slides;
          currSlide = ionicSlideBoxDelegate.$getByHandle(slideHandle).currentIndex() || 0;
          maxWidth = slider.width() + 'px';
          if (indexOf.call(disableScroll, currSlide) >= 0) {
            $ionicScrollDelegate.$getByHandle(attrs.scrollHandle).freezeScroll(true);
          }
          maxHeight = 'none';
          slideContents = angular.element(slider[0].querySelectorAll('ion-slide > .dynamic-slider-wrapper > *'));
          slides = angular.element(slider[0].querySelectorAll('ion-slide > .dynamic-slider-wrapper'));
          slideContents.css('max-height', maxHeight);
          $ionicScrollDelegate.scrollTop();
          maxHeight = slides[currSlide].getBoundingClientRect().height + 20 + 'px';
          slideContents.css('width', maxWidth);
          modal.css('height', maxHeight);
          $timeout((function() {
            $ionicScrollDelegate.resize();
          }), 50);
        });
      };
      scope.$on('slideBox.slideChanged', slideChanged);
      $timeout(slideChanged, 50);
      scope.$on('destroy', function() {
        element.remove();
      });
      angular.element($window).bind('resize', function() {
        console.log("resized window");
        ionicSlideBoxDelegate.update();
        $ionicScrollDelegate.resize();
        ionicSlideBoxDelegate.update();
        scope.$digest();
      });
    };
    return {
      require: "^ionSlideBox",
      restrict: 'A',
      link: linkFunction
    };
  }
]);

这是一个自定义指令，该指令扩展了ionic slide指令，以便根据窗口的大小调整内容的大小。 此部分有效，但仅适用于幻灯片更改（如您从此slideChanged()函数可以看到的）。

现在，我需要根据窗口大小的变化来调整它的大小（例如，在移动设备上，例如，从横向导航到纵向。

有人可以解释为什么此onResize（两个控制台日志均不起作用）吗？ 我该如何实现？

理想情况下，只刷新宽度会很好，但是重新渲染也是可以接受的。

Answer 1

您可以通过针对台式机/移动设备使用resize侦听器+移动设备上的orientationchange resize侦听器来实现此目的。 在移动设备上更改方向时不会触发resize 。 有一个独特的事件可以监听该动作，它称为orientationchange 。

请注意，不推荐使用angular.element().bind() ，您应该使用.on() 。

myApp.controller('MyCtrl', function($scope, $window) {

    //window resize listener
    angular.element($window).on('resize', function() {
      console.log("resized window");
    });

    //switching from landscape / portrait listener
    angular.element($window).on('orientationchange', function() {
      console.log("orientation change");
    });
});

>> 演示小提琴

演示：