Zdarzenie kliknięcia wyzwalacza z dyrektywy angularjs

Question

Jak mogę wywołać zdarzenie click dla elementów li określających ich indeks z dyrektywy angularjs? Próbowałem używać $ pierwszy do wyzwalania kliknij pierwszy element, ale nie działa.

Dzięki za pomoc.

Answer 1

Oto prawdopodobnie inny sposób, aby to osiągnąć. Przechodzą do dyrektywy zarówno indeksu i elementu i pozwól dyrektywy Setup HTML w szablonie:

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 dyrektywy:

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

Prawdopodobnie lepiej byłoby dodać ng-kliknięcie do obrazu, jak wskazano w innej odpowiedzi.

Aktualizacja

Link do demo było nieprawidłowe. Został zaktualizowany do: http://plnkr.co/edit/ybcNosdPA76J1IqXjcGG?p=preview

Answer 2

To więcej kątowego sposób to zrobić: http://plnkr.co/edit/xYNX47EsYvl4aRuGZmvo?p=preview

1. dodałem $ scope.selectedItem że dostaje piłkę pierwszego problemu (zwłoce obraz)
2. dodałem $ scope.setSelectedItem i nazywa to w ng-click. Twoje ostateczne wymagania mogą być różne, ale przy użyciu dyrektywy wiążą click i zmienić src było przesadą, ponieważ większość z nich mogą być obsługiwane z szablonem
3. korzystanie Zawiadomienie o ngSrc aby uniknąć błędny połączeń serwera, na wstępnym obciążeniem
4. Będziesz trzeba dostosować niektóre style, aby uzyskać obraz umieszczony bezpośrednio w div. Jeśli naprawdę potrzebujesz użyć background-image, potrzebujesz dyrektywy, takiej jak ngSrc, która odradza ustawianie stylu background-image, dopóki nie zostaną załadowane prawdziwe dane.

Answer 3

Jest to rozszerzenie do odpowiedzi Langdona z dyrektywnym podejściem do problemu. Jeśli zamierzasz mieć wiele galerii na stronie, może to być jeden ze sposobów na obejście tego bez większego zamieszania.

Zastosowanie:

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

See it working here

Answer 4

W ten sposób udało mi się wywołać kliknięcie przycisku podczas wczytywania strony.

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

Prosty dyrektywa, która zajmuje indeks z NG-repeat i wykorzystuje stan zadzwonić pierwszy przycisk w indeksie i kliknij go, gdy strona ładuje.

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

To był jedyny sposób, w jaki mogłem programować automatyczne programowanie w pierwszej kolejności.angular.element(document.querySelector('#btn')).click(); Nie działa z poziomu kontrolera, więc ta prosta dyrektywa wydaje się najbardziej skuteczna, jeśli próbujesz uruchomić kliknięcie na stronie ładowania i możesz określić, który przycisk kliknąć, przechodząc do indeksu. Pomógł mi ten komunikat o przepełnieniu stosu z innego wpisu: https://stackoverflow.com/a/26495541/4684183 Dyrektywa onLoadClicker.