javascript - How to make angularJS $watch to detect changes in style? - Stack Overflow

admin管理员组

文章数量:1345115

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 pare new value and old value.

How to make it work even for style changes?

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 pare new value and old value.

How to make it work even for style changes?

• javascript
• jquery
• angularjs
• scope
• watch

Share Improve this question Follow edited Mar 5, 2015 at 13:56 R3tep 12.9k1010 gold badges5151 silver badges7676 bronze badges asked Mar 5, 2015 at 13:52 Pradvaar cruzPradvaar cruz 29111 gold badge99 silver badges2424 bronze badges 1

• 1 Can you attach your code please? – mmmmmpie Commented Mar 5, 2015 at 13:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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

        }
    };

}]);

本文标签： javascriptHow to make angularJS watch to detect changes in styleStack Overflow