Come attivare l'evento di ridimensionamento in AngularJS

Question

Sto utilizzando Angular & Bootstrap, con il controllo della scheda di navigazione per cambiare la visibilità delle div. In un div, ho una grande img (disegno CAD dell'edificio). Inoltre, sovrapposto i marcatori sull'immagine. Voglio ridimensionare la posizione x/y dei marcatori in base alla larghezza dell'immagine & immagine naturalWidth. Sto usando una direttiva di ridimensionamento per rilevare le modifiche e aggiornare il mio ambito.

Il mio problema è che se l'utente cambia scheda e passa di nuovo a div con CAD img, l'aggiornamento non avviene finché non ridimensiono il browser (o sorprendentemente se premo il tasto CMD su Mac).

C'è un modo angolare per attivare l'evento di ridimensionamento per forzare il ricalcolo dei miei indicatori. O c'è un evento che posso attingere che viene attivato quando viene visualizzato completamente?

O c'è un approccio angolare più raffinato che dovrei prendere?

Questo è l'HTML, la direttiva di ridimensionamento che ho scritto è sul tag.

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

E questa è la direttiva di ridimensionamento (adattato da 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(); 
    }); 
    }; 
}). 

Answer 1

Prova iniettando $timeout nella direttiva resize:

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

... quindi aggiungere la seguente riga alla fondo:

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

Questo dovrebbe attivare il gestore che è stato associato a $window.resize subito dopo il rendering del browser.

Answer 2

La risposta accettata non ha funzionato per me - w è indefinito.

Questo fatto:

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

Answer 3

questo ha lavorato per me quando il di cui sopra non ha fatto.

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

ho dovuto usare anche $timeout con un ritardo nel mio caso per evitare errori di circa digerire cicli già essere in corso. Non tutti i casi d'uso potrebbero aver bisogno di questo.

dispatchEvent è ben supportato http://caniuse.com/#feat=dispatchevent

Tuttavia, è necessario IE9 e IE10 supporto si dovrà usare il loro metodo propritary: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/fireEvent