首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在AngularJS中触发调整大小事件

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

Stack Overflow用户
提问于 2014-05-14 01:23:52
回答 3查看 32.5K关注 0票数 19

我使用Angular & Bootstrap和导航选项卡控件来切换div的可见性。在一个div中,我有一个很大的img (建筑物的CAD绘图)。然后我还在图像上叠加标记。我想根据图像宽度和图像naturalWidth来缩放标记的x/y位置。我正在使用resize指令来检测更改并更新我的作用域。

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

有没有一种角度的方法来触发resize事件来强制重新计算我的标记。或者,有没有我可以点击的事件,当完全显示时会触发?

或者,我应该采取更精致的角度方法吗?

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

代码语言:javascript
复制
<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>

这是resize指令(改编自http://jsfiddle.net/jaredwilli/SfJ8c/)

代码语言:javascript
复制
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();
    });
  };
}).
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-05-14 06:23:24

尝试将$timeout注入到resize指令中:

代码语言:javascript
复制
directive('resize', function($window, $timeout) {

..。然后在其底部添加以下行:

代码语言:javascript
复制
$timeout(function(){ w.triggerHandler('resize') });

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

票数 12
EN

Stack Overflow用户

发布于 2016-11-23 22:54:11

当上面的方法不起作用时,这对我来说是有效的。

代码语言:javascript
复制
$timeout(function() {
    $window.dispatchEvent(new Event("resize"));
}, 100);

我还必须使用$timeout,但在我的情况下需要延迟,以防止有关已在进行的摘要周期的错误。并不是所有的用例都需要它。

http://caniuse.com/#feat=dispatchevent很好地支持dispatchEvent

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

票数 22
EN

Stack Overflow用户

发布于 2016-11-19 01:19:43

接受的答案对我不起作用-w是未定义的。

这样做了:

代码语言:javascript
复制
$timeout(function(){
    $(window).trigger('resize');
});
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23637834

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档