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

Question 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

Question 2

EDIT Since as you said in the comments bootstrap is not an option for you, i would suggest you write your own little directive. There is probably tons of tutorial out there like this

The Problem in your case is, that you manipulate the DOM from outside the Angular-Scope. So Angular iteslf doesnt even know about those new image-elements, and further not about the ng-click and ng-src directive. This would only be the case, if you would use Angulars own $compile-Service to put the images back into the DOM.

I would recommend you to use Angular-UI Bootstrap for an image gallery. Else, you would need to create your own Directive for this, but why reinvent the wheel?

Question 3

I ended up wrapping each image with link and changing jQuery appropriately. It was the fastest and easiest for me.

<a href="url" target="_blank">
   <img class="commercial" ng-src="pathToImageOrImageVar"/>
</a>

And changed line

var backImg = $('.commercial-container img:first');

changed to

var backImg = $('.commercial-container a:first');

Question 4

I had this issue in case when I used aliases of angularJS. If I wrote something like this:

function someController($scope) {
    var vm = this;

    vm.switchSelected = function (passedEvent) {
    }
}

and then if in html code to write the following:

<div ng-controller="toolBoxController as tbc">

then in order to use switchSelected you need write something like this:

<img ng-src="{{si}}" width="230px" ng-click="tbc.switchSelected($event)"/>

so, check did you used

 var vm=this;

in your controller. Then you need to add aliasing to your html part.