AngularJS: ng-click on img? Manipulating images (kind of gallery-like) with jQuery?

Question

Should ng-click work with img tag ?

<img ng-src="img" ng-click="openNewWindow(url)/>

myFunction is defined in controller and is $scope available … Nothing gets called; any ideas?

(I would like to open a new tab/window when image is clicked, but I don't even get into my function)

Thanks for any info

EDIT I probably rushed myself when first asking this question. I know now why it doesn't work in my case: I am manipulating images with jQuery for some kind a 'gallery' effect … (if anyone has an idea how to do that in AngularJS please bring it on). This is the html I am talking about:

<div class="commercial-container">
    <img class="commercial" ng-src="pathToImageOrImageVar" ng-click="openNewWindow(urlToOpen)" />
    <img class="commercial" ng-src="pathToImageOrImageVar" ng-click="openNewWindow(urlToOpen2)" />
    <img class="commercial" ng-src="pathToImageOrImageVar" ng-click="openNewWindow(urlToOpen3)" />
    <img class="commercial" ng-src="pathToImageOrImageVar" ng-click="openNewWindow(urlToOpen4)" />
</div>

And here the jQuery with which I create fade-in/fade-out effect (showing one image, then the next and so on indefinitely)

 function fadeInLastImg(){
    var backImg = $('.commercial-container img:first');
    backImg.hide();
    backImg.remove();
    $('.commercial-container' ).append( backImg );
    backImg.fadeIn();
};

So my real question is this:

• How can I get the same behaviour as with my jQuery so that images will be ng-clickable?

You can of course provide a better solution (perhaps AngularJS one) for changing images like this if you know one …

Thank you

Answer 1

Yes, ng-click works on images.

Without further code I can't tell you why yours isn't working, but the code you have pasted will call myFunction in the scope of the controller governing that element.

EDIT

You definitely don't need to use jQuery for this, and it's not really thinking about it in an "angular" mindset if you do.

My suggestion is to make a directive to do this. I've created a plunker with a simple example of what it could look like.

Here's a summary:

Note: Because animation is important to you, make sure you include the ng-animate src and include it as a dependency in your app module definition. Use the same version of animate as base angular.

HTML

<script src="http://code.angularjs.org/1.2.13/angular.js"></script>

<script src="http://code.angularjs.org/1.2.13/angular-animate.js"></script>

Javascript

angular.module("gallery", ['ngAnimate'])

Now Define a template for your directive:

galleryPartial.html

<div class="container">
  <img ng-src="{{image.url}}" 
       alt="{{image.name}}" 
       ng-repeat="image in images" 
       class="gallery-image fade-animation"
       ng-click="openInNewWindow($index)"
       ng-show="nowShowing==$index">
</div>

This template simply says "I want one image for every item listed in the 'images' array from the scope. The src is should be the url property of the image, and the alt text should be the name. When I click an image, run the openInNewWindow function passing the index of that image in the array. Finally, hide images unless the nowShowing variable is set to their index."

Also note the class fade-animation. This could be called anything, but this is the class we'll use to define the animation in CSS later.

Next we write the directive itself. It's pretty simple - it just has to use this template, and then define the openInNewWindow function, as well as iterate nowShowing through the array indexes:

.directive('galleryExample', function($interval, $window){
  return {
    restrict: 'A',
    templateUrl: 'galleryPartial.html',
    scope: {
      images: '='
    },
    link: function(scope, element, attributes){
      // Initialise the nowshowing variable to show the first image.
      scope.nowShowing = 0;

      // Set an interval to show the next image every couple of seconds.
      $interval(function showNext(){
        // Make sure we loop back to the start.
        if(scope.nowShowing != scope.images.length - 1){
          scope.nowShowing ++;
        }
        else{
          scope.nowShowing = 0;
        }
      }, 2000);

      // Image click behaviour
      scope.openInNewWindow = function(index){
        $window.open(scope.images[index].url);
      }
    }
  };
})

You will see I have used an isolate scope to make this directive reusable and to keep things separated nicely. You don't have to do this, but it's good practice. The html for the directive must therefore also pass the images you want to put in the gallery, like so:

index.html

  <body ng-controller="AppController">
    <div gallery-example="" images="imageList"></div>
  </body>

So the last bit of javascript we need to write is to populate that images array in the AppController scope. Normally you'd use a service to get a list of images from a server or something, but in this case we'll hard code it:

.controller('AppController', function($scope){
  $scope.imageList = [
    {
      url: 'http://placekitten.com/200/200',
      name: 'Kitten 1'
    },
    {
      url: 'http://placekitten.com/201/201',
      name: 'Kitten 2'
    },
    {
      url: 'http://placekitten.com/201/202',
      name: 'Kitten 3'
    },
    {
      url: 'http://placekitten.com/201/203',
      name: 'Kitten 4'
    }
  ]
})

Finally, styling. This will also define the animation (note the use of ng-hide classes etc). I strongly recommend you read up on this here as it is too big a subject to cover in this (already long!) answer:

.fade-animation.ng-hide-add,
.fade-animation.ng-hide-remove {
  -webkit-transition:0.5s linear all;
  -moz-transition: 0.5s linear all;
  -o-transition: 0.5s linear all;
  transition:0.5s linear all;

  display:block !important;
  opacity:1;
}

This is your end result