web-dev-qa-db-fra.com

déclencher un événement clic de la directive angularjs

Comment puis-je déclencher un événement click pour des éléments li spécifiant leur index à partir de la directive angularjs?.

Merci pour toute aide.

eventsangularjsclickangularjs-directive
26
ayimos

Voici peut-être une façon différente d’atteindre cet objectif. Passez dans la directive à la fois l'index et l'élément et laissez la directive configurer le code HTML dans un modèle:

Démo: 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>

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

Il serait probablement préférable d’ajouter un clic sur l’image, comme indiqué dans une autre réponse.

Mettre à jour

Le lien pour la démo était incorrect. Il a été mis à jour pour: http://plnkr.co/edit/ybcNosdPA76J1IqXjcGG?p=preview

38
lucuma

C'est plus la manière angulaire de le faire: http://plnkr.co/edit/xYNX47EsYvl4aRuGZmvo?p=preview

  1. J'ai ajouté $ scope.selectedItem qui vous permet de résoudre votre premier problème (par défaut, l'image)
  2. J'ai ajouté $ scope.setSelectedItem et l'ai appelé dans ng-click. Vos exigences finales peuvent être différentes, mais l'utilisation d'une directive pour lier click et changer src était excessive, car la plupart d'entre elles peuvent être gérées avec un modèle.
  3. Notez que vous utilisez ngSrc pour éviter les appels de serveur erronés lors du chargement initial
  4. Vous aurez besoin d'ajuster certains styles pour que l'image soit positionnée directement dans la div. Si vous avez vraiment besoin d'utiliser background-image, vous aurez besoin d'une directive telle que ngSrc qui diffère la définition du style background-image jusqu'à ce que les données réelles soient chargées.
8
Langdon

Ceci est une extension de la réponse de Langdon avec une approche directive du problème. Si vous avez plusieurs galeries sur la page, cela peut être une façon de procéder sans trop de problèmes.

Usage:

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

Voir le travail ici

2
querie.cc

C’est ainsi que j’ai pu déclencher un clic de bouton lors du chargement de la page. 

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

Une directive simple qui extrait l'index de ng-repeat et utilise une condition pour appeler le premier bouton de l'index et cliquer dessus lors du chargement de la page. 

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);
                    }
                }
            };
        });

C’est la seule façon pour moi de déclencher un clic automatique par programme en premier lieu. angular.element(document.querySelector('#btn')).click(); N'a pas fonctionné à partir du contrôleur, donc cette directive simple semble plus efficace si vous essayez d'exécuter un clic sur le chargement de la page et que vous pouvez spécifier le bouton sur lequel cliquer en transmettant l'index. J'ai obtenu de l'aide via cette réponse de dépassement de pile d'une autre référence de publication: https://stackoverflow.com/a/26495541/4684183 onLoadClicker Directive.

0
Ian Poston Framer