2013-08-28 27 views
14

Tôi đang sử dụng ng-repeat trong mẫu cho một chỉ thị tùy chỉnh như sau:Đi qua tham số để ng-click chỉ thị, trong chỉ thị tùy chỉnh

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

Khi render trên trang nguồn trông giống như

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

Tôi có chức năng togglePhoto được xác định trong chỉ thị của mình. Nếu không có tham số {{index}} được truyền trong nó hoạt động và chức năng được gọi. Với chỉ số, nó không cháy.

Làm cách nào để lấy chỉ mục của ảnh được nhấp vào hàm togglePhoto?

+0

'togglePhoto (x)' được xác định như thế nào? – zsong

Trả lời

37

Đã tìm ra điều này. Hy vọng nó sẽ giúp bất cứ ai khác bị mắc kẹt trên đó.

Thứ nhất này

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

Nên

ng-click="togglePhoto($index)" 

Niềng răng không cần thiết!

Thứ hai tôi thấy rằng bạn có thể vượt qua các đối tượng sự kiện vào chức năng nhấp chuột ví dụ

ng-click="togglePhoto($event)" 

Sau đó bắt sự kiện đó và tìm hiểu những gì yếu tố trigged nó trong chức năng nhấp chuột

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

Tôi nghĩ rằng vấn đề là bạn đang sử dụng các dấu ngoặc nhọn đôi bên trong của ng-click, và góc cạnh không thích điều đó.

Hãy thử thay đổi lặp lại của bạn này (lưu ý không có dấu ngoặc nhọn khoảng $ index):

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

Tôi cũng đặt cùng một jsfiddle làm việc để chứng minh rằng công trình này.

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

Các vấn đề liên quan