如何让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);
                }
            }

        }
    };

}]);