$watch and AngularJS zen aka animation when $scope property changes

[Lukas Ruebbelke]

I want to insert a jquery animation when a $scope property changes. When $scope.currentImage in this case changes, I want to detect it an animate so the image gets a nice transition.

I THINK the way to do this is with the $watch expression but I wanted to run it by everyone to see if I am on the right track. I would appreciate any feedback on my approach. Thanks!

HTML Code
<img ng-src="{{currentImage.image}}" alt="{{currentImage.description}}">

JavaScript Code

// Cache so reference is only looked up once
$scope.$albumImage = $('#albumImage img');

// This function is designed to add an animation to when the image changes       
$scope.$watch('currentImage', function() {
    // hide the current image
    $scope.$albumImage.hide();
    // when the new image loads - fade it in
    $scope.$albumImage.load(function() {
        $scope.$albumImage.fadeIn();
    });
});

[Misko Hevery]

On Tue, Apr 10, 2012 at 11:33 PM, Lukas Ruebbelke <sim...@gmail.com> wrote:

I want to insert a jquery animation when a $scope property changes. When $scope.currentImage in this case changes, I want to detect it an animate so the image gets a nice transition.

I THINK the way to do this is with the $watch expression but I wanted to run it by everyone to see if I am on the right track. I would appreciate any feedback on my approach. Thanks!

HTML Code
<img ng-src="{{currentImage.image}}" alt="{{currentImage.description}}">

JavaScript Code

// Cache so reference is only looked up once
$scope.$albumImage = $('#albumImage img');

Don't store dom in scope, it goes against the zen of angular. use closure for that.

 

// This function is designed to add an animation to when the image changes       
$scope.$watch('currentImage', function() {
    // hide the current image
    $scope.$albumImage.hide();

This will make it disappear completely in an instance. I think you want to manage the unloading of the image as well. I think you may need to crate your own directive like this

<img fade-src="{{}}">

and then manage the whole unloading and loading process yourself.

 

    // when the new image loads - fade it in
    $scope.$albumImage.load(function() {
        $scope.$albumImage.fadeIn();
    });
});

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/h-0c8gwpisEJ.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[ProLoser]

Or you could just go the normal approach of rendering a list of images and adding a third party plugin (or hand-code one) to fade from one to another. Should be pretty straightforward.