javascript - 如何在 AngularJS 中触发调整大小事件

Question

我正在使用 Angular & Bootstrap，带有导航选项卡控件来切换 div 的可见性。在一个 div 中，我有一个大的 img(建筑物的 CAD 图纸)。然后我还在图像上覆盖标记。我想根据图像宽度和图像 naturalWidth 缩放标记的 x/y 位置。我正在使用调整大小指令来检测更改并更新我的范围。

我的问题是，如果用户切换选项卡并使用 CAD img 切换回 div，则刷新不会发生，直到我调整浏览器的大小(或者如果我在 Mac 上按下 CMD 键令人惊讶)。

是否有 Angular 方式来触发调整大小事件以强制重新计算我的标记。或者是否有一个我可以利用的事件在完全显示时触发？

还是我应该采取更精致的 Angular 方法？

这是 HTML，我写的调整大小指令在标签上。

<div id="imageDiv" style="position: relative;"  ng-show="selectedLocation"  >
  <img ng-src="../maps/image/{{selectedLocation}}" 
       style=" max-width: 100%; max-height: auto; border:solid 1px black" resize  imageonload />
</div>

这是调整大小指令(改编自 http://jsfiddle.net/jaredwilli/SfJ8c/ )

directive('resize', function($window) {
  return function(scope, element) {
    var w = angular.element($window);

    scope.imgCadImage = element;

    scope.getWindowDimensions = function() {
      return {
        'h' : scope.imgCadImage[0].width,
        'w' : scope.imgCadImage[0].height
      };
    };
    scope.$watch(scope.getWindowDimensions, function(newValue, oldValue) {
      if (scope.imgCadImage[0].naturalWidth)
        scope.imgScale = newValue.w / scope.imgCadImage[0].naturalWidth;
      else
        scope.imgScale = 1;
      console.log("watched resize event - scale = "+scope.imgScale)
      scope.updateCADMarkersAfterResize();
    }, true);
    w.bind('resize', function() {
      console.log("'resize' - scale = "+scope.imgScale)
      scope.$apply();
    });
  };
}).

Answer 1

当上述没有时，这对我有用。

$timeout(function() {
    $window.dispatchEvent(new Event("resize"));
}, 100);

我还必须使用 $timeout在我的情况下延迟，以防止关于摘要周期的错误已经在进行中。并非所有用例都需要这个。
dispatchEvent得到很好的支持 http://caniuse.com/#feat=dispatchevent

但是，如果您需要 IE9 和 IE10 支持，则必须使用它们的专有方法: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/fireEvent