从angularjs指令触发click事件 [英] trigger click event from angularjs directive

问题描述

我怎样才能触发的li元素从angularjs指令指定其索引的单击事件？
我一直在使用$第一触发点击的第一要素试过，但它不工作。

How can i trigger a click event for li elements specifying their index from the angularjs directive? I have tried using $first for triggering click for the first element, but its not working.

感谢您的帮助。

推荐答案

下面也许是为你实现这一种不同的方式。通入指令索引和项目两个，让指令设置在模板中的HTML：

Here is perhaps a different way for you to achieve this. Pass into the directive both the index and the item and let the directive setup the html in a template:

演示：<一href=\"http://plnkr.co/edit/ybcNosdPA76J1IqXjcGG?p=$p$pview\">http://plnkr.co/edit/ybcNosdPA76J1IqXjcGG?p=$p$pview

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-点击图片。

You probably would be better off adding a ng-click to the image as pointed out in another answer.

** **更新

的链接，演示是不正确的。它已被更新为：<一href=\"http://plnkr.co/edit/ybcNosdPA76J1IqXjcGG?p=$p$pview\">http://plnkr.co/edit/ybcNosdPA76J1IqXjcGG?p=$p$pview

The link for the demo was incorrect. It has been updated to: http://plnkr.co/edit/ybcNosdPA76J1IqXjcGG?p=preview

这篇关于从angularjs指令触发click事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！