如何在AngularJS中触发调整大小事件
我使用Angular & Bootstrap和导航选项卡控件来切换div的可见性。在一个div中，我有一个很大的img (建筑物的CAD绘图)。然后我还在图像上叠加标记。我想根据图像宽度和图像naturalWidth来缩放标记的x/y位置。我正在使用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>这是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
Stack Overflow用户
发布于 2014-05-14 06:23:24
尝试将$timeout注入到resize指令中：
directive('resize', function($window, $timeout) {..。然后在其底部添加以下行：
$timeout(function(){ w.triggerHandler('resize') });这应该会在浏览器呈现后立即触发绑定到$window.resize的处理程序。
Stack Overflow用户
发布于 2016-11-23 22:54:11
当上面的方法不起作用时，这对我来说是有效的。
$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
Stack Overflow用户
发布于 2016-11-19 01:19:43
接受的答案对我不起作用-w是未定义的。
这样做了：
$timeout(function(){
$(window).trigger('resize');
});https://stackoverflow.com/questions/23637834
复制相似问题
腾讯云开发者
