Javascript 如何使angularJS$watch检测样式的变化？

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

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

当我对内容（文本）以及一些样式（如颜色高亮显示和粗体文本）进行任何更改时，它会保存更改的文本和样式

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

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

如何使其即使在样式更改时也有效

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

---

你能附上你的代码吗？这种方法不适用于我的情况。我有一个Bootstrap标签表单，我正在观察最后一个带有画布的标签的样式属性“display”。如果“display”的值从“none”更改为“block”，那么我想触发resize事件来重新绘制该选项卡内的画布。我想我需要调用$scope.$digest（）使其工作，但我不知道如何工作。我正在使用自定义指令来控制最后一个选项卡，并查看displaycss属性。在调试过程中，我可以看到手表，但它似乎运行得太早，不能一直正常工作。

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

        }
    };

}]);