Ответ 1
Да, ng-click работает с изображениями.
Без дополнительного кода я не могу сказать вам, почему ваш не работает, но код, который вы вставили, вызовет myFunction в область действия контроллера, управляющего этим элементом.
ИЗМЕНИТЬ
Вам определенно не нужно использовать jQuery для этого, и он не думает об этом в стиле "angular", если вы это сделаете.
Мое предложение - сделать директиву для этого. Я создал плункер с простым примером того, как он мог выглядеть.
Здесь резюме:
Примечание. Поскольку анимация важна для вас, убедитесь, что вы включили ng-animate src и включили ее в качестве зависимости в определении вашего модуля приложения. Используйте ту же версию анимации, что и 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'])
Теперь задайте шаблон для своей директивы:
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>
Этот шаблон просто говорит: "Я хочу одно изображение для каждого элемента, указанного в массиве" images "из области действия. src должен быть свойством url изображения, а текст alt должен быть имя. Когда я нажимаю изображение, запустите функцию openInNewWindow, передающую индекс этого изображения в массиве. Наконец, скройте изображения, если только переменная nowShowing не указана в их индексе."
Также обратите внимание на класс fade-animation. Это можно назвать чем угодно, но это класс, который мы будем использовать для определения анимации в CSS позже.
Далее мы пишем эту директиву. Это довольно просто - нужно просто использовать этот шаблон, а затем определить функцию openInNewWindow, а также выполнить итерацию nowShowing через индексы массива:
.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);
}
}
};
})
Вы увидите, что я использовал изолировать область, чтобы сделать эту директиву многократной, и чтобы все было прекрасно разделено. Вам не обязательно это делать, но это хорошая практика. Поэтому html для директивы должен также передавать изображения, которые вы хотите поместить в галерею, например:
index.html
<body ng-controller="AppController">
<div gallery-example="" images="imageList"></div>
</body>
Итак, последний бит javascript, который нам нужно написать, - это заполнить этот массив изображений в области AppController. Обычно вы должны использовать сервис, чтобы получить список изображений с сервера или что-то в этом роде, но в этом случае мы будем его жестко кодировать:
.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'
}
]
})
Наконец, стиль. Это также определит анимацию (обратите внимание на использование классов ng-hide и т.д.). Я настоятельно рекомендую вам прочитать здесь здесь, поскольку он слишком большой, чтобы охватить этот ответ (уже длинный!):
.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;
}