शैली में बदलावों का पता लगाने के लिए angularJS $ घड़ी कैसे बनाएं?

Question

मेरे पास सभी शैली नियंत्रणों के साथ एक समृद्ध टेक्स्ट बॉक्स है।

जब मैं इसमें एक नया टेक्स्ट डालता हूं - यह बचाता है।

जब मैं सामग्री (टेक्स्ट) में रंगीन हाइलाइटिंग और बोल्ड टेक्स्ट जैसी कुछ शैलियों के साथ कोई भी परिवर्तन करता हूं - यह बदले गए टेक्स्ट और शैलियों को बचाता है।

लेकिन, जब मैं बिना किसी सामग्री परिवर्तन के शैली बदलता हूं - यह उन शैली में बदलावों को सहेज नहीं पाएगा।

मैं नए मूल्य और पुराने मूल्य की तुलना करने के लिए $ घड़ी का उपयोग कर रहा हूं।

शैली परिवर्तनों के लिए भी इसे कैसे काम करें?

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

     } 
    }; 

}]); 

अपने HTML में:

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

मामले में आप के निर्देश के बाहर कस्टम कार्यों को निष्पादित करना चाहते हैं:

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

     } 
    }; 

}]); 

:

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

अपने निर्देशक कोड में यह परिवर्तन करने के