14

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功能的照片索引?

4

2 回答 2

37

想通了。希望它可以帮助其他人坚持下去。

首先这个

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

应该

ng-click="togglePhoto($index)"

不需要大括号!

其次,我发现您可以将事件对象传递给点击函数,例如

ng-click="togglePhoto($event)"

然后捕获该事件并找出在您的点击函数中触发它的元素

$scope.togglePhoto = function(e)
{
    console.log(e.currentTarget)
}
于 2013-08-28T04:05:01.283 回答
1

我认为问题在于您在 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/

于 2015-07-14T13:29:17.653 回答