javascript – 如何在AngularJS中触发resize事件

我正在使用Angular&引导,通过导航选项卡控件切换div的可见性。在一个div中,我有一个大的img(CAD绘图的建筑物)。我也在图像上叠加标记。我想根据图像宽度& image naturalWidth。我正在使用resize指令来检测更改并更新我的范围。

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

是否有一种角度的方式来触发resize事件来强制重新计算标记。还是有一个事件,我可以挖掘,当被充分显示被解雇?

还是有一个更精细的角度方法我应该采取?

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

这是调整大小的指令(从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();
    });
  };
}).
尝试将$ timeout注入resize伪指令:

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

…然后将以下行添加到其底部:

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

这应该在浏览器呈现之后触发您绑定到$ window.resize的处理程序。

翻译自:https://stackoverflow.com/questions/23637834/how-can-i-trigger-resize-event-in-angularjs

转载注明原文:javascript – 如何在AngularJS中触发resize事件