Angular- Das nächste Element auf mouseover

Question

Ich bin neu in Angular JS und ich versuche, eine kleine Web-App zum Lernen zu erstellen .. Ich versuche, einen Tooltip-Text auf mouseover, aber ich bin mir nicht sicher, wie bekommen sie die „Angular Art und Weise“ getan ..

I 2 Spannweiten erstellt, wenn die erste schwebt, möchte ich die zweite

ich versuchte, die Actions-

anrufen unter Verwendung ng-Mouseover- und ng-mouseleave zeigen

<span class="info" ng-mouseover="info_in();" ng-mouseleave="info_out();"> 
    <img src="images/info.png" /> 
</span> 

<span class="info_bubble" ng-show="info">The Tooltip Text</span> 

Und das ist, wo ich mit der JS-

bekam

Es wird mehr als 1 Tooltip-Text auf jeder Seite geben und ich bin mir nicht sicher, wie es geht. Ich habe versucht mit "next()" und "nearest()" aber konnte nicht bekommen es

zu arbeiten, wenn ich versuchen, das Element zu Mouseover, erhalte ich „dies ist keine Funktion“

Answer 1

Sie die richtige Idee haben, aber Ihre Implementierung in Richtung auf die jQuery Art und Weise bewegen, nicht die Art und Weise Angular . :)

Versuchen Sie folgendes:

<span class="info" ng-mouseover="info=true" ng-mouseleave="info=false"> 
    <img src="images/info.png" /> 
</span> 

<span class="info_bubble" ng-show="info">The Tooltip Text</span> 

Kein Controller-Code erforderlich ist, damit dies funktioniert.

Was Sie tun, ist, dass, wenn die Maus das Bild betritt, Angular $scope.info auf true setzt. Und da Ihre QuickInfo diese Bereichsvariable überwacht, löst sie die ng-show-Anweisung aus, die Ihren Tooltipp anzeigt.

Die ng-show Direktive kann übersetzt werden als: Wenn $scope.info == true, dann show() dieses Element. Wenn $scope.info == false, dann hide() dieses Element.

In der Tat könnte man ausführlicher sein (was für das Lernen gut ist), wie dies Ihr Tooltip Element schreiben:

<span class="info_bubble" ng-show="info==true">The Tooltip Text</span> 

ich feststellen, dass Sie die jQuery-Methode speziell versucht, verwenden um ein Element zu finden im DOM, um damit zu arbeiten.

Der Winkelweg ist, Variablen auf dem $scope zu ändern. Andere HTML-Elemente überwachen Variablen auf dem $scope und automatisch ändern sich je nachdem, was der neue Wert ist. Der jQuery-Weg besteht darin, einen DOM-Wert zu erreichen und gezielt einen Wert zu setzen. Der Winkelweg ist dem Schreien in den Wind ähnlich: "Hey, mein Name ist $scope.info und ich bin jetzt wahr!" und erwartet, dass ein anderes Element es hört und sagt: "Ok, cool, jetzt kann ich mich zeigen, weil $scope.info wahr ist."

Das ist der Hauptunterschied zwischen der Art, wie jQuery und Angular arbeiten.