trigger click event from angularjs directive

Question

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   Thanks for any help

User · Accepted Answer

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:

Demo: 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 directive:

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 +')'});
        });
    }
}
}]);

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

Update

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

User · Answer

This is more the Angular way to do it  http   plnkr co edit xYNX47EsYvl4aRuGZmvo p preview   I added  scope selectedItem that gets you past your first problem  defaulting the image  I added  scope setSelectedItem and called it in ng-click   Your final requirements may be different  but using a directive to bind click and change src was overkill  since most of it can be handled with template Notice use of ngSrc to avoid errant server calls on initial load You ll need to adjust some styles to get the image positioned right in the div   If you really  need to use background-image  then you ll need a directive like ngSrc that defers setting the background-image style until after real data has loaded

User · Answer

This is an extension to Langdon s answer with a directive approach to the problem  If you re going to have multiple galleries on the page this may be one way to go about it without much fuss   Usage    lt gallery images  items  gt  lt  gallery gt   lt gallery images  cats  gt  lt  gallery gt    See it working here

User · Answer

This is how I was able to trigger a button click when the page loads     lt li ng-repeat  a in array  gt     lt a class  button  id  btn  ng-click  function a   index   index  on-load-clicker gt        a name      lt  a gt   lt  li gt    A simple directive that takes the index from the ng-repeat and uses a condition to call the first button in the index and click it when the page loads    angular      module  myApp            directive  onLoadClicker   function   timeout                return                   restrict   A                   scope                        index    index                                     link  function  scope  iElm                        if   scope index    0                             timeout function                                  iElm triggerHandler  click                                0                                                                        This was the only way I was able to even trigger an auto click programmatically in the first place   angular element document querySelector   btn    click     Did not work from the controller so making this simple directive seems most effective if you are trying to run a click on page load and you can specify which button to click by passing in the index  I got help through this stack-overflow answer from another post reference  https   stackoverflow com a 26495541 4684183 onLoadClicker Directive

[events] trigger click event from angularjs directive

Examples related to events

Examples related to angularjs

Examples related to click

Examples related to angularjs-directive