javascript - 如何让 angularJS $watch 检测样式的变化？

Question

我有一个包含所有样式控件的富文本框。

当我在其中输入新文本时 - 它会保存。

当我对内容(文本)以及颜色突出显示和粗体文本等样式进行任何更改时，它会保存更改的文本和样式。

但是，当我只更改样式而不更改任何内容时 - 它不会保存这些样式更改。

我正在使用 $watch 来比较新值和旧值。

如何让它在样式更改时也能正常工作？

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

如果你想在指令外执行自定义函数:

<div spy-style="functionNameToExecute" 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);
                }
            }

        }
    };

}]);