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.
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
C'est plus la manière angulaire de le faire: http://plnkr.co/edit/xYNX47EsYvl4aRuGZmvo?p=preview
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.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.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>
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.