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.

Solution 1

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

Solution 2

This is more the Angular way to do it: http://plnkr.co/edit/xYNX47EsYvl4aRuGZmvo?p=preview

1. I added $scope.selectedItem that gets you past your first problem (defaulting the image)
2. 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
3. Notice use of ngSrc to avoid errant server calls on initial load
4. 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.

Solution 3

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:

<gallery images="items"></gallery>
<gallery images="cats"></gallery>

See it working here

Comments

[lucuma]

Can you post some code that you have tried.

[tamakisquare]

Are you saying that you want to trigger click event via the code? Why would you want to do that?

[ar-coding]

I am trying to display images in a list. I want to display the first image by default when the page loads. Please see the plunker below. As of now i am doing that using jQuery timeout function which is not optimal solution, but need to change that to angularjs. plnkr.co/edit/CVnp9FKcIMr7GoSpfcoX

[Mohammad Umair Khan]

guys, what do we mean by restrict ='CA' in the above example? I have seen C and A but what is CA?

[lucuma]

@MohammadUmairKhan Please see the directive documentation on the angular site. docs.angularjs.org/guide/directive

[Mohammad Umair Khan]

@lucuma yes I did see that but I did not understand how can a combination of the 2 can be made use of, the idea that i had was that we are able to use only one of the ECMA

[lucuma]

If you specify more than one say EA your directive can be either an element or a class.

[A-IV]

@lucuma Your code can lead to unexpected behavior. Try to select images in this example: plnkr.co/edit/V5FRHB5Q3LeMSq6If7DM?p=preview You should use $apply in jQuery bind (set useApply = true in above example). Or you should use ng-click (set useNg = true). Please update your answer.

[Danny Bullis]

Please correct me if I'm wrong, but I don't think you need to specify replace: false and transclude: false.

[Ian Poston Framer]

If you are going to down vote please explain why. You don't help the community by being negative without explanation. I posted this above answer because the other solutions didn't work for me.

[activedecay]

it was probably someone trying to grief you. happens to me all the time. at least my upvote takes you back to 0 \_shrug_/