Angular ng class is applied differently in 1.3.0 versus 1.2.25
I have a relatively large Angular app built on top of 1.2.25 version. In my recent upgrade to 1.3.0, I only encountered one major issue that seems to change when the html classes in the DOM change.
In this jsfiddle example, notice the clock that gets the DOM element size, which is based on a class modified by another directive: http://jsfiddle.net/travisgosselin/sx7jponj/1/ This example uses Angular 1.2.25.
scope.$watch(function () {
return {
width: element.closest('.checkSize').width(),
height: element.closest('.checkSize').height()
};
}, function (size) {
scope.height = size.height;
}, true);
Another jsfiddle, which is exactly the same but as of Angular 1.3.0, you will notice that the watch does not trigger the update, as the class appears after $ watch is applied without updating the element's size. http://jsfiddle.net/travisgosselin/t80segou/1/
scope.$watch(function () {
return {
width: element.closest('.checkSize').width(),
height: element.closest('.checkSize').height()
};
}, function (size) {
scope.height = size.height;
}, true);
The idea is to allow one of my directives to be resized no matter what happens in the other component.
In Angular's changelog, the only minor change I can see relates to ngAnimate. See Breaking Changes in 1.3.0-rc.5: API $ animate CSS class The API will always defer changes until the end of the next digest. This allows ngAnimate to merge class changes that occur over a short period of time in 1 or 2 DOM records, rather than many. This prevents freezing in browsers like IE, and is generally good. If you find that your classes are not immediately applied, be sure to call $ digest ().
Any idea how I can best modify this script to make the clock on the size of the dom element shoot? My only alternative at this point is to use a series of events that are triggered from different locations that trigger a resize (pub / sub).
source to share
There is a way if you can include it ngAnimate
in your application.
$animate.enabled(false, element)
- Run this method inside a directive changeclass
passing the element reference to which it appliesng-class
app.directive("changeClass", function ($animate) {
return {
restrict: 'A',
scope: true,
template: '<div><div ng-click="changeSize()">Change</div><div ng-class="{ \'biggerSize\': biggerSize }" class="smallerSize checkSize"><div read-class></div></div></div>',
replace: true,
link: function (scope, element, attrs) {
$animate.enabled(false, angular.element(element.children()[1]));
scope.biggerSize = false;
scope.changeSize = function () {
scope.biggerSize = !scope.biggerSize;
};
}
};
});
source to share