AngularJS/jQuery: la modifica del testo in span non attiva l'evento di ridimensionamento

Question

Non riesco a trovare l'evento resize di jQuery da attivare su un span, dopo aver modificato il testo all'interno dello span.

sto applicando i gestori di eventi all'elemento span utilizzando una direttiva AngularJS:

angular.module("test.directives", []) 
    .directive("trackSize", ["$parse", function($parse) { 
     return function(scope, element, attrs) { 
      function callback() { 
       var size = { w: element.width(), h: element.height() }; 
       scope[attrs.trackSize].call(scope, size); 
      } 
      element.on("resize", function() { 
       console.log("resize"); 
       scope.$apply(callback); 
      }); 
      callback(); 
     }; 
    }]); 

ma io non sto vedendo il fuoco di richiamata quando il testo all'interno delle span modifiche. Se è rilevante: il testo viene modificato utilizzando un'espressione AngularJS incorporata.

mio attuale (completo) frammento di codice può essere visto sul jsFiddle a: http://jsfiddle.net/KkctU/13/

Answer 1

L'evento di ridimensionamento non è pensato per gli elementi all'interno del documento, come un arco. È fatto per l'uso solo sulla finestra.

Here is a plugin that might help you. Non l'ho usato, ma sembra che sia sulla strada giusta per te.

Alla fine, tuttavia, potrebbe essere migliore/più semplice impostare un orologio nella propria direttiva su qualunque cosa vi sia associato, quindi controllare se l'altezza e la larghezza sono cambiate quando il testo cambia. Proprio come un'idea:

app.directive('trackSize', function() { 
    return function(scope, element, attrs) { 
     var w = element.width(), 
      h = element.height(); 
     scope.$watch(attrs.trackSize, function(v) { 
      element.text(v); 
      var w2 = element.width(), 
       h2 = element.height(); 
      if(w != w2 || h != h2) { 
       //TODO: do something here, the size has changed. 
      }   
     }); 
    } 
});