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。有一个独特的事件可以监听该操作，它被称为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");
    });
});

>> Demo fiddle

演示：