current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 21 down vote favorite
7

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.

share|improve this question
4  
Can you post some code that you have tried. – lucuma Apr 22 '13 at 16:07
    
Are you saying that you want to trigger click event via the code? Why would you want to do that? – tamakisquare Apr 22 '13 at 16:15
    
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 – ayimos Apr 22 '13 at 17:09
up vote 30 down vote accepted

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

share|improve this answer
    
You need to save your plnk and update the url! – Langdon Apr 22 '13 at 19:16
    
Thanks, it has been updated. – lucuma Apr 22 '13 at 19:21
    
guys, what do we mean by restrict ='CA' in the above example? I have seen C and A but what is CA? – Mohammad Umair Khan Aug 26 '13 at 12:15
    
@MohammadUmairKhan Please see the directive documentation on the angular site. docs.angularjs.org/guide/directive – lucuma Aug 26 '13 at 14:12
    
@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 – Mohammad Umair Khan Aug 27 '13 at 4:16
up vote 7 down vote

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.
share|improve this answer
up vote 2 down vote

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

share|improve this answer
up vote 0 down vote

This is how I was able to trigger a button click when the page loads. 

<li ng-repeat="a in array">
  <a class="button" id="btn" ng-click="function(a)" index="$index" on-load-clicker>
    {{a.name}}
  </a>
</li>

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: http://stackoverflow.com/a/26495541/4684183 onLoadClicker Directive.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.