从angularjs指令触发click事件

Question

如何触发li元素的click事件来指定angularjs指令的索引？我尝试使用$ first来触发第一个元素的click,但它不起作用.

谢谢你的帮助.

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

Answer 2

这更像是Angular的方法:http : //plnkr.co/edit/xYNX47EsYvl4aRuGZmvo?p=preview

1. 我添加了$ scope.selectedItem,让你超越你的第一个问题(默认图像)
2. 我添加了$ scope.setSelectedItem并将其调用ng-click.您的最终要求可能不同,但使用指令进行绑定click和更改src是过度的,因为大部分都可以使用模板处理
3. 请注意使用ngSrc以避免在初始加载时出现错误的服务器调用
4. 您需要调整一些样式才能使图像位于div中.如果你真的需要使用background-image,那么你需要一个像ngSrc这样的指令来推迟设置background-image样式,直到加载实际数据.