For the time being I can work around the problem like so:
In a Utils service:
util.classSelectors = *function *(map) { *var *selectors = [];
*_*.forEach(map, *function *(value, key) { *if *(value) {
selectors.push(key); } }); *return *selectors.*length *?
selectors.join(*' '*) : *''*;};
Add it to the scope:
$scope.*classSelectors *= Utils.classSelectors;
In the template:
<*div **class=**"child {{classSelectors({updated: updated, focused: isFocused,
selected: isSelected})}}"*><*span*>Is selected?
*{{isSelected}}*</*span*></*div*>
Does the job until the issue is resolved. I think there's something not
quite right with angular-animate.js's setClass method which is used instead
of angular's default setClass method when it's added to the project...
Needs more investigation.
On Wednesday, 3 December 2014 13:30:53 UTC, Derek Donnelly wrote:
>
> So just to clarify, my questions are:
>
> 1. With ngAnimate added, why does ng-class="{selected: isSelected}" stop
> working, while class="child {{isSelected ? 'selected' : ''}}" works?
> 2. Is there any way we can reduce the number of calls though to
> performAnimation
> or stop them completely when we've explicitly disabled animation
> within the widget.
>
>
> On Wednesday, 3 December 2014 13:21:28 UTC, Derek Donnelly wrote:
>>
>> I’ve noticed a problem with ng-class not adding the selector to the
>> element when ngAnimate is added to the project.
>>
>> I’ve a UI widget (directive) that is made up of other child directives. A
>> child template example:
>>
>> <div class="child" ng-class="{selected: isSelected}"><span>Is selected?
>> {{isSelected}}</span></div>
>>
>> The widget is destined for use in a project that’s using ngAnimate,
>> however I don’t want ngAnimate touching the widget or it’s children, so the
>> root directive of the widget has the following in its post link function:
>>
>> $animate.enabled(false, element);
>>
>> This disables animations for it and all its children. With this in place,
>> as expected none of the typical ng-animate related class selectors are
>> being added to the child elements during interaction. However within
>> angular-animate.js, performAnimation is still called many times for these
>> children until it backs out when it checks the result of
>> animationsDisabled(element, parentElement). It’s probably worth mentioning
>> that these children exist within two levels of ngRepeats, but I don’t
>> believe that is anything to do with it.
>>
>> When selected, the children display *Is selected? true*, and when they
>> are not, they display *Is selected? false*. However when selected the
>> selected selector is not being added to the element classes. This only
>> occurs when ngAnimate is added to the project, without it everything works
>> as expected. I can work around this issue by not using ng-class, and
>> writing the template like this…
>>
>> <div class="child {{isSelected ? 'selected' : ''}}"><span>Is selected?
>> {{isSelected}}</span></div>
>>
>> …but I don’t really like this. My guess is it’s something to do with the
>> watchers in ngClass not firing with ngAnimate in the mix, and with the
>> children printing out is selected and from debugging I know the value of
>> isSelected is correct on the scope.
>>
>> Not that it’s needed, but even if I add a timeout and call $scope.$appy
>> again after a short delay, it doesn’t make any difference.
>>
>> Any ideas what’s going on here?
>>
>> Tried multiple versions of angular and angular-animate, no joy, but right
>> now this project is using 1.3.0-rc.5.
>>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
