Come rendere angularJS $ l'orologio per rilevare i cambiamenti di stile?

Question

Ho una casella di testo con tutti i controlli di stile.

Quando inserisco un nuovo testo, salva.

Quando si apportano modifiche al contenuto (testo) insieme ad alcuni stili come l'evidenziazione del colore e il testo in grassetto - salva il testo e gli stili modificati.

Tuttavia, quando eseguo solo modifiche di stile senza modifiche del contenuto, non salverà quelle modifiche di stile.

Sto usando $ watch per confrontare nuovo valore e vecchio valore.

Come farlo funzionare anche per cambi di stile?

Answer 1

angular.module("app",[]).directive('spyStyle', [function() { 

    return { 

     link: function (scope, element, attrs) { 

      scope.$watch(function() { 
       return element.css(attrs['spyAttribute']); 
      }, styleChangedCallBack, 
      true); 

      function styleChangedCallBack(newValue, oldValue) { 
       if (newValue !== oldValue) { 
        // do something interesting here 
       } 
      } 

     } 
    }; 

}]); 

nel codice HTML:

<div spy-style spy-attribute="height" > 

Nel caso in cui si desidera eseguire funzioni personalizzate al di fuori della direttiva:

<div spy-style="functionNameToExecute" spy-attribute="height" > 

Nel codice direttiva fanno di questo cambiamento:

angular.module("app",[]).directive('spyStyle', [function() { 

    return { 

     link: function (scope, element, attrs) { 

      scope.$watch(function() { 
       return element.css(attrs['spyAttribute']); 
      }, styleChangedCallBack, 
      true); 

      function styleChangedCallBack(newValue, oldValue) { 
       if (newValue !== oldValue) { 
        // do something interesting here 
        // invoking callback function: 
        scope[attrs['spyStyle']](newValue); 
       } 
      } 

     } 
    }; 

}]);