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

这是一个自定义指令，它扩展了离子幻灯片指令，以便根据窗口大小调整内容大小。此部分仅适用于幻灯片更改（您可以从此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");
    });
});

<强>＆GT;＆GT; Demo fiddle

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

我的代码如下：

1 个答案:

演示：