Как я могу вызвать событие изменения размера в AngularJS

Я использую Angular и Bootstrap, с элементом управления вкладкой nav, чтобы переключать видимость div. В одном div у меня есть большой img (чертеж САПР здания). Я также накладываю маркеры на изображение. Я хочу масштабировать положение x/y маркеров на основе ширины изображения и изображения naturalWidth. Я использую директиву resize для обнаружения изменений и обновления моей области.

Моя проблема заключается в том, что если пользователь переключает вкладки и переключается обратно в div с помощью CAD img, обновление не происходит, пока я не изменю размер браузера (или, что удивительно, если я нажму кнопку CMD на Mac).

Есть ли способ Angular запускать событие изменения размера, чтобы заставить мои маркеры пересчитываться. Или есть событие, которое я могу задействовать, когда он полностью отображается?

Или есть более утонченный подход Angular, который я должен взять?

Это 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();
    });
  };
}).

Ответ 1

Попробуйте ввести $timeout в директиву resize:

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

... затем добавьте следующую строку в конец:

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

Это должно вызвать обработчик, с которым вы привязались к $window.resize сразу после отображения браузера.

Ответ 2

Это работало для меня, когда выше не было.

$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

Ответ 3

Принятый ответ не сработал у меня - w - undefined.

Это:

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