webentwicklung-frage-antwort-db.com.de

auslöser-click-ereignis aus der eckjj-direktive

Wie kann ich ein click -Ereignis für li-Elemente auslösen, die ihren Index aus der anglejs-Direktive angeben? Ich habe versucht, zuerst $ zum Auslösen des Klickens für das erste Element zu verwenden, aber es funktioniert nicht.

Danke für jede Hilfe.

eventsangularjsclickangularjs-directive
26
ayimos

Hier haben Sie vielleicht einen anderen Weg, um dies zu erreichen. Übergeben Sie in die Direktive sowohl den Index als auch das Element und lassen Sie die HTML-Direktive in einer Vorlage einrichten:

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

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

Es ist wahrscheinlich besser, wenn Sie einen Ng-Klick zum Bild hinzufügen, wie in einer anderen Antwort angegeben.

Update

Der Link für die Demo war falsch. Es wurde aktualisiert auf: http://plnkr.co/edit/ybcNosdPA76J1IqXjcGG?p=preview

38
lucuma

Dies ist mehr der rechtwinklige Weg, dies zu tun: http://plnkr.co/edit/xYNX47EsYvl4aRuGZmvo?p=preview

  1. Ich habe $ scope.selectedItem hinzugefügt, mit dem Sie an Ihrem ersten Problem vorbeigehen können (Standardeinstellung für das Bild).
  2. Ich habe $ scope.setSelectedItem hinzugefügt und es in ng-click aufgerufen. Ihre endgültigen Anforderungen können unterschiedlich sein, aber die Verwendung einer Anweisung zum Binden von click und von src war übertrieben, da die meisten davon mit einer Vorlage behandelt werden können
  3. Beachten Sie die Verwendung von ngSrc , um fehlerhafte Serveraufrufe beim ersten Laden zu vermeiden
  4. Sie müssen einige Stile anpassen, damit das Bild rechts im div angezeigt wird. Wenn Sie wirklich background-image verwenden müssen, benötigen Sie eine Direktive wie ngSrc, die die Einstellung des background-image-Stils verzögert, bis echte Daten geladen wurden.
8
Langdon

Dies ist eine Erweiterung der Antwort von Langdon mit einem direkten Ansatz für das Problem. Wenn Sie mehrere Galerien auf der Seite haben, können Sie dies ohne großen Aufwand tun.

Verwendungszweck:

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

Sehen Sie es hier arbeiten

2
querie.cc

So konnte ich beim Laden der Seite einen Schaltflächenklick auslösen. 

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

Eine einfache Direktive, die den Index aus dem Wiederholungsprogramm ng-repeat entnimmt und mithilfe einer Bedingung die erste Schaltfläche im Index aufruft und beim Laden der Seite darauf klickt. 

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

Dies war die einzige Möglichkeit, einen automatischen Klick überhaupt programmgesteuert auszulösen. angular.element(document.querySelector('#btn')).click(); Hat vom Controller aus nicht funktioniert. Daher ist das Erstellen dieser einfachen Direktive am effektivsten, wenn Sie versuchen, einen Klick auf das Laden der Seite auszuführen, und Sie können angeben, welche Schaltfläche durch Klicken in den Index zu klicken ist. Ich habe Hilfe durch diese Stack-Overflow-Antwort von einer anderen Beitragsreferenz erhalten: https://stackoverflow.com/a/26495541/4684183 onLoadClicker Directive.

0
Ian Poston Framer