How to make angularJS $watch to detect changes in style?

Question

I am having a rich text box with all the style controls.

When I enter a new text in it - it saves.

When I make any changes in the content (text) along with some styles like color highlighting and bold text - it saves the changed text and styles.

But, when I just make style changes without any content change - it won't save those style changes.

I am using $watch to compare new value and old value.

How to make it work even for style changes?

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

        }
    };

}]);

In your HTML:

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

In case you want to execute custom functions outside the directive:

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

In your Directive code make this change:

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

        }
    };

}]);