events - 从 angularjs 指令触发点击事件

Question

如何触发 li 元素的点击事件，并从 angularjs 指令指定其索引？我尝试使用 $first 来触发第一个元素的点击，但它不起作用。

感谢您的帮助。

Answer 1

这也许是您实现这一目标的不同方法。将索引和项目传递给指令，并让指令在模板中设置 html:

演示:http://plnkr.co/edit/ybcNosdPA76J1IqXjcGG?p=preview

html:

<ul id="thumbnails">
    <li class="thumbnail" ng-repeat="item in items" options='#my-container' itemdata='item' index="$index">

    </li>
  </ul>

js指令:

app.directive('thumbnail', [function() {
  return {
    restrict: 'CA',
    replace: false,
    transclude: false,
    scope: {
        index: '=index',
        item: '=itemdata'
    },
    template: '<a href="#"><img src="{{item.src}}" alt="{{item.alt}}" /></a>',
    link: function(scope, elem, attrs) {
        if (parseInt(scope.index) == 0) {
            angular.element(attrs.options).css({'background-image':'url('+ scope.item.src +')'});
        }

        elem.bind('click', function() {
            var src = elem.find('img').attr('src');

            // call your SmoothZoom here
            angular.element(attrs.options).css({'background-image':'url('+ scope.item.src +')'});
        });
    }
}
}]);

正如另一个答案中指出的那样，您可能最好向图像添加 ng-click。

更新

演示链接不正确。已更新为:http://plnkr.co/edit/ybcNosdPA76J1IqXjcGG?p=preview