如何触发AngularJS中的resize事件?

I'm using Angular & Bootstrap, with the nav tab control to switch visibility of divs. In one div, I have a large img (CAD drawing of building). I also then overlay markers on the image. I want to scale the x/y position of the markers based on the image width & image naturalWidth. I'm using a resize directive to detect changes and update my scope.

我使用的是角度和引导，使用nav标签控件来切换div的可视性。在一个div中，我有一个大型img(建筑CAD制图)。然后在图像上覆盖标记。我想根据图像的宽度和图像的自然宽度来缩放标记的x/y位置。我正在使用一个resize指令来检测变化和更新我的范围。

My problem is that if user switches tabs and switches back to the div with the CAD img, the refresh doesn't happen until I resize the browser (or surprisingly if I press the CMD key on Mac).

我的问题是，如果用户用CAD img切换制表符和切换回div，那么直到我调整浏览器的大小(或者如果我在Mac上按CMD键，会令人惊讶)，刷新才会发生。

Is there an angular way to trigger the resize event to force my markers to be recalculated. Or is there an event I can tap into that is fired when the is fully displayed ?

是否有一种角度的方式来触发调整大小事件，以迫使我的标记重新计算。或者，是否有一个事件可以在完全显示时触发?

Or is there a more refined angular approach I should take?

或者我应该采用更精细的角度方法?

This is the HTML, the resize directive I've written is on the tag.

这是HTML，我写的resize指令在标签上。

<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>

And this is the resize directive (adapted from http://jsfiddle.net/jaredwilli/SfJ8c/)

这是resize指令(改编自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();
    });
  };
}).

3 个解决方案

#1

Try injecting $timeout into the resize directive:

尝试向resize指令注入$timeout:

directive('resize', function($window, $timeout) {

... then add the following line to the bottom of it:

…然后在下面加一行:

$timeout(function(){ w.triggerHandler('resize') });

This should trigger the handler you have bound to $window.resize just after the browser renders.

这将触发绑定到$window的处理程序。在浏览器呈现之后调整大小。

#2

This worked for me when the above did not.

这对我起了作用，但上面没有。

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

I had to also use $timeout with a delay in my case to prevent errors about digest cycles already being in progress. Not all uses cases may need this.

在我的例子中，我还必须使用$timeout和一个delay来防止已经在进行的摘要周期的错误。不是所有的用例都需要这个。

dispatchEvent is well supported http://caniuse.com/#feat=dispatchevent

dispatchEvent很受支持http://caniuse.com/#feat= dispatchEvent

However, it you need IE9 and IE10 support you'll have to use their propritary method: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/fireEvent

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

#3

The accepted answer did not work for me - w is undefined.

公认的答案对我不起作用——w没有定义。

This did:

这是:

$timeout(function(){
    $(window).trigger('resize');
});

#1