Question

我在模板中使用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功能？

Answer 1

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

首先是

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

应该是

ng-click="togglePhoto($index)"

不需要大括号！

其次，我发现你可以将事件对象传递给click函数，例如

ng-click="togglePhoto($event)"

然后捕捉该事件并找出在您的点击功能中触发它的元素

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

Answer 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/

在custom指令中将参数传递给ng-click指令

2 个答案: