eckig - blättern Sie zum angeklickt Element

Question

Ich denke, ich könnte etwas einfaches verpassen.

Ich habe ein Container-Element, und einen ng-repeat auf dem Kind-Elemente wie folgt:

<div id="container"> 
    <div class="activity" ng-click="myFunc($element)"> 
    </div> 
</div> 

Was ich möchte, ist, den Behälter für das Klickaktivität blättern (Container scrollbaren sind und einen Satz Höhe).

Ich versuchte $ Element mit dem von der Oberseite des Behälters der Tätigkeit versetzte gerade zu bekommen, und dann nur jQuerys Funktion auf den Offset wie so blättern animieren verwenden:

$("#container").animate({ scrollTop: theOffset, { duration: 'medium',easing:'swing' }); 

Aber ich kann nicht scheinen zu benutze .offset auf $ elemnt ...

Was fehlt mir hier?

Vielen Dank im Voraus, Gabi.

Answer 1

Während ich normalerweise nicht das DOM von AngularJS getrennt Manipulation raten, eine Art und Weise, dies an der Arbeit ist wie folgt:

I $element in $event geändert, um das Zielelement aus dem Click-Ereignisse zu erhalten :

<div id="container"> 
    <div class="activity" ng-click="myFunc($event)"> 
    </div> 
</div> 

Wie für den Javascript Teil, bekommen wir wollen, dass der Offset des ausgewählten Elements wird uns den Standort erhalten.

$scope.myFunc = function(theOffset){ 
    $("html, body").animate({ scrollTop: $(theOffset.target).offset().top, duration: 'medium',easing:'swing' }); 
}; 

Ich hatte den jQuery-Selektor ändern auf den html, body zu sein, so dass es auf der Seite selbst animiert, anstatt nur einen Container. Im Idealfall sollten Sie mit AngularJS vermeiden, jquery DOM-Manipulationen direkt durchzuführen.