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?
Share Improve this question edited Mar 5, 2015 at 13:56 R3tep 12.9k10 gold badges51 silver badges76 bronze badges asked Mar 5, 2015 at 13:52 Pradvaar cruzPradvaar cruz 2911 gold badge9 silver badges24 bronze badges 1- 1 Can you attach your code please? – mmmmmpie Commented Mar 5, 2015 at 13:54
1 Answer
Reset to default 10angular.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);
}
}
}
};
}]);