角のある - マウスオーバーで最も近い要素を取得

Question

私はAngular JSを使い慣れていて、学習用の小さなWebアプリケーションを作成しようとしています。マウスオーバーでツールチップテキストを作成しようとしていますが、それは最初にホバリングするとき、私はアクション -

を呼び出すためにNG-マウスオーバーとNG-mouseleaveを使用してみました

秒を表示したい、私は2つのスパンを作成した。..

を「アンギュラ方法」を成し遂げます

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

それは私がJSで得たところです。

各ページには2つ以上のツールチップテキストがありますが、どうすればいいのかわかりません。「next（）」と「closest（）」を試しましたが、できませんでした私は要素をマウスオーバーしようとすると、それは

を動作させるため、私が手ではなく、角度の方法あなたは正しい考えを持っている

Answer 1

「これは関数ではありません」が、あなたの実装では、jQueryの道に向かって移動されます。 :)

ことは、これを試してみてください。これが機能するために

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

ませコントローラのコードは必要ありません。

あなたがしていることは、マウスが画像に入ると、角度が$scope.infoからtrueに設定されることです。あなたのツールチップがそのスコープ変数を監視しているので、あなたのツールチップを表示するng-show指示をトリガーします。

の場合は、show()となります。 $scope.info == falseの場合、hide()この要素。

実際には、このようなあなたのtooltip要素の書き込み（学習のために良いです）より冗長かもしれない：私はあなたが、具体的要素を発見しようとしているのjQueryのメソッドを使用していることに気付く

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

をそれを扱うためにはDOMの中で。

角度のある方法は、$scopeの変数を変更することです。他のHTML要素は$scopeの変数を監視し、は自動的にが新しい値の内容に応じて変更されます。 jQueryの方法は、DOM要素の値に触れて値を設定して設定することです。角度のあるやり方は、風に叫ぶのに似ています。「ねえ、私の名前は$scope.infoで、私は今真実です！他の何人かの要素がそれを聞いて、「いいねえ、今、$scope.infoが本当であるので、私は自分自身を見せてくれるだろう」と期待しています。

これは、jQueryとAngularのやり方の主な違いです。