Jak sprawić, by zegarek angularJS $ wykrył zmiany w stylu?

Question

Mam bogate pole tekstowe ze wszystkimi kontrolkami stylu.

Po wprowadzeniu nowego tekstu - zapisuje.

Po wprowadzeniu zmian w treści (tekstu) wraz z niektórymi stylami, takimi jak wyróżnianie kolorów i pogrubiony tekst, zapisuje zmieniony tekst i style.

Ale gdy wprowadzam zmiany w stylu bez zmiany zawartości - nie zachowam zmian stylu.

Używam zegarka $, aby porównać nową wartość ze starą wartością.

Jak to działa, nawet w przypadku zmian stylu?

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

     } 
    }; 

}]); 

w HTML:

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

W przypadku, gdy chcesz wykonywać funkcje niestandardowe poza dyrektywy:

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

W kodzie Dyrektywa dokonać tej zmiany:

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); 
       } 
      } 

     } 
    }; 

}]);