Передача параметра в директиву ng-click, в рамках настраиваемой директивы

Я использую ng-repeat в шаблоне для пользовательской директивы следующим образом:

<li ng-repeat="image in images">
    <img ng-src="{{image.url}}" ng-click="togglePhoto({{$index}})">
</li>

При отображении на странице источник выглядит как

<li ng-repeat="image in images" class="ng-scope">
    <img ng-src="http://example.com/example.jpg" ng-click="togglePhoto(1)" src="http://example.com/example.jpg">
</li>

У меня есть функция togglePhoto, определенная в моей директиве. Без передаваемого в нем параметра {{index}} работает и вызывается функция. С индексом он не срабатывает.

Как получить индекс фотографии, нажатой в функцию togglePhoto?

Ответ 1

Выяснил это. Надеюсь, это поможет кому-то еще застрять на нем.

Во-первых, это

ng-click="togglePhoto({{$index}})"

Должно быть

ng-click="togglePhoto($index)"

Скобки не нужны!

Во-вторых, я обнаружил, что вы можете передать объект события в функцию щелчка, например

ng-click="togglePhoto($event)"

Затем поймайте это событие и узнайте, какой элемент он вызвал в вашей функции щелчка

$scope.togglePhoto = function(e)
{
    console.log(e.currentTarget)
}

Ответ 2

Я думаю, что проблема в том, что вы используете двойные фигурные скобки внутри ng-click, а angular не нравится.

Попробуйте изменить репитер на это (обратите внимание, что в $index нет фигурных скобок):

<li ng-repeat="image in images">
    <img ng-src="{{image.url}}" ng-click="togglePhoto($index)">
</li>

Я также собрал рабочий jsfiddle, чтобы показать, что это работает.

http://jsfiddle.net/n02ms8s0/4/