2013-10-21 13 views
5

Ho una semplice direttivaangolare - Ascolto sul cambiamento transclusa

angular.module('myApp') 
    .directive('myDirective', function() { 
     return { 
      template: '<p ng-transclude></p>', 
      restrict: 'A', 
      transclude: true, 
      link: function postLink(scope, element, attrs) { 
      } 
     } 
    } 
); 

Sto cercando di eseguire il codice ogni volta che il contenuto cambia inclusione e la direttiva è resa - Ho bisogno del contenuto transclusa.

algoritmo Esempio mi piacerebbe correre in questo caso è:

  • parole conteggio dei contenuti transclusa.

Ho provato scope.$watch in più moduli ma senza risultato.

risposta

11

È possibile utilizzare il jqlite incluso in Angular all'interno di una funzione di espressione dell'orologio per ottenere ciò. Di seguito è riportato il codice che controlla la lunghezza dell'elemento transuso utilizzando jqLite (element.text(). Length). L'orologio si attiva ogni volta che cambia la lunghezza dell'elemento a cui questa direttiva è collegata.

E la nuova lunghezza è passata come newValue alla seconda funzione all'interno dell'orologio (poiché la restituiamo dalla funzione di primo orologio).

myApp.directive('myDirective', function() { 
    return { 
     template: '<p ng-transclude></p>', 
     restrict: 'A', 
     transclude: true, 
     replace: true, 
     link: function (scope, element, attrs) { 

      scope.$watch(function() { 
       return element.text().length; 
      }, 

      function (newValue, oldValue) { 
       console.log('New Length ', newValue); 
      }); 
     } 
     } 
    }); 

Ho un jsfiddle lavorare qui:

http://jsfiddle.net/2erbF/6/

Questo affronta lo scenario di conteggio delle parole/lettera. Ma potresti scrivere un test sullo element.text() se necessario per attivare qualsiasi modifica, non solo un cambio di lunghezza.

+1

Grazie mille. Tutto quello che dovevo fare è guardare una funzione !!! Non posso credere di non averlo provato. :) –

Problemi correlati