0

I've seen a lot of answers to this question using jQuery. Like this: Stop a gif animation onload, on mouseover start the activation and Animating a gif on hover. But I'm looking for a way to do it with angular. I'm thinking it should be the same idea as when doing it in jQuery. I want to do exactly what the person who asked the question in the first link wanted to do, but in angular:

  1. On page load => Animations for all gifs are stopped

  2. On mouseover => Animations starts for that one gif

  3. On mouseout => Animation stops again for that gif

Here's what I have in my HTML:

<img class="projectGif" src="{{project.gifUrl}}" ng-mouseover="animation(project)">

The "project" object that I'm passing into the animation function is an object I'm getting earlier in my code from ng-repeat="project in projects". Then in my JavaScript: 

$scope.animation = function(project) {
    //not sure what to do here
};

I looked around on the angular documentation page for something similar to the jQuery $(this).attr(), and found stuff like $attr, and $set, and I thought maybe I could just use those to set the src in my img tag to the pathway for my img. So like $set('src', 'project.imgUrl') but I get an error in my console that says $set is not defined.

So my main question is, how do I use angular to make it so that my web page starts with a static .gif (or img etc) and then on hover, have the static .gif change to an animated .gif?

Community
  • 1
  • 1
Julian
  • 174
  • 2
  • 15

2 Answers2

2

In pure HTML

<img  ng-repeat="project in vm.projects"
      ng-src="{{project.gifUrl}}"
      ng-init="project.gifUrl=project.staticUrl"
      ng-mouseover="project.gifUrl=project.dynamicUrl"
      ng-mouseleave="project.gifUrl=project.staticUrl">

Or a mixed solution:

HTML

<div ng-controller="myController as vm">
    <img ng-repeat="project in vm.projects"
         ng-src="{{project.gifUrl}}"
         ng-init="project.gifUrl=project.staticUrl"
         ng-mouseover="vm.setDynamic($index)"
         ng-mouseleave="vm.setStatic($index)">
</div>

JS

var vm = this;
vm.setDynamic = function(index) { 
    vm.projects[index].gifUrl = vm.projects[index].dynamicUrl; 
};
vm.setStatic  = function(index) { 
    vm.projects[index].gifUrl = vm.projects[index].staticUrl; 
};

Notice that I am using the $index special property of the ng-repeat directive. For more information on ng-repeat and $index, see the AngularJS ngRepeat API Docs

georgeawg
  • 46,994
  • 13
  • 63
  • 85
  • You should change the title if this question to "Activate .gif on mouseover in AngularJS with ng-repeat". It wasn't clear that ng-repeat was part of your problem. – georgeawg Nov 23 '15 at 05:43
  • PS. The Angular equivalent for `$attr` is `angular.element(elem).attr("src", "project.imgUrl");`. But that's a question for another day. Cheers. – georgeawg Nov 23 '15 at 06:10
  • Great! Your solutions seems to work! Out of curiosity, is it just personal preference whether one would implement the pure HTML method vs the HTML and JS method? Or is one more efficient? – Julian Nov 26 '15 at 20:29
  • In general, put the math in the JS, put the wiring in the HTML. Further discussion requires a new question. Glad you liked my answer. Cheers. – georgeawg Nov 26 '15 at 21:04
0

Using the technique from Animating a gif on hover, create a directive to which you provide both the url for the static gif and the animated gif, and then make it toggle between the two images on mouseover.

You can also use the technique describe in Extending Angular Directive

Once you've created the directive, your html could look something like

<img ng-src="{{project.staticUrl}}" custom-src-on-mouseover="{{project.gifUrl}}">

Community
  • 1
  • 1
forivall
  • 8,242
  • 1
  • 28
  • 56
  • Thanks for your response, but I'm not sure I understand. When you say create a custom tag, do you mean like how they have `id="imgDino"`? And then when you say to toggle between the two images, I've looked but angular doesn't have a toggle function, does it? – Julian Nov 23 '15 at 01:14
  • @Julian sorry, I haven't worked with angular in a while, and by custom tag, I meant directive. I've updated my answer accordingly, with links to the documentation – forivall Nov 23 '15 at 22:28
  • Thanks! I'll try it out! – Julian Nov 26 '15 at 06:38