Angler JSの他の要素にカーソルを合わせて

Question

以下のようにjQueryメソッドを試してみましょう：これは私のAngular環境では機能しませんが、角度JSのスコープメソッドの外側でこれをしようとしているので、角度の範囲メソッドを使用してこれを実装する方法を知らない（新しい角度に）アドバイス？

 $('.song-thumb .hover-play').on('mouseenter', function(e) { 
     var elem = $('section.suggestedAlbums img'); 
     elem.trigger(e.type); 
     elem.addClass('hoverclass'); 
     }); 

     $('.song-thumb .hover-play').on('mouseleave', function(e) { 
     var elem = $('section.suggestedAlbums img'); 
     elem.trigger(e.type); 
     elem.removeClass('hoverclass'); 
     }); 
     var count = 0; 

     $('section.suggestedAlbums img').hover(function() { 
     count++; 
     $('[remove]').html('<label remove><br>It triggers the hover event(' + count + ') too.<br></label>'); 
     }); 

フルページコード：

<script> 
      $('.song-thumb .hover-play').on('mouseenter', function(e) { 
      var elem = $('section.suggestedAlbums img'); 
      elem.trigger(e.type); 
      elem.addClass('hoverclass'); 
      }); 

      $('.song-thumb .hover-play').on('mouseleave', function(e) { 
      var elem = $('section.suggestedAlbums img'); 
      elem.trigger(e.type); 
      elem.removeClass('hoverclass'); 
      }); 
      var count = 0; 

      $('section.suggestedAlbums img').hover(function() { 
      count++; 
      $('[remove]').html('<label remove><br>It triggers the hover event(' + count + ') too.<br></label>'); 
      }); 
    </script> 

<!-- <h2>{{trackListData.listTitle}}</h2> 
--><div ng-repeat="track in trackListData.tracks track by $index " class="feature-item-homepage fade-animate-nostagger"> 
    <div class="song-thumb" ng-class="{active: $root.currentPlaying.song_id == track.id}"> 
     <!--3 Cases--> 
     <!--Not the song being played--> 
     <div class="hover-play" ng-if="$root.currentPlaying.song_id != track.id" ng-click="$root.playSong(track);"> 
      <i class="fa fa-plus add-to-playlist" ng-init="playlistOption = false" ng-click="$root.initPlaylistOption($event, track.id); $event.stopPropagation();"></i> 
      <i class="fa fa-play play-song"></i> 

      <img src="img/producer_icon_white.png" class="prod_logo"> 

      <div class="song-title" style="width: 80%;padding-top:25px;"> 
      <a class="song-linking" href="#/song/{{track.id}}"> 
       <h4>{{track.title}}</h4> 
       <h5>{{track.artist.user_name}}</h5> 
      </a> 
      </div> 
     </div> 

     <!--The current song but paused--> 
     <div class="hover-play" ng-if="$root.currentPlaying.song_id == track.id && !$root.isPlaying" play-music> 
      <i class="fa fa-plus add-to-playlist" ng-init="playlistOption = false" ng-click="$root.initPlaylistOption($event, track.id); $event.stopPropagation();"></i> 
      <i class="fa fa-play play-song"></i> 
     </div> 

     <!--The current song but playing--> 
     <div class="hover-play" ng-if="$root.currentPlaying.song_id == track.id && $root.isPlaying" pause-music> 
      <i class="fa fa-plus add-to-playlist" ng-init="playlistOption = false" ng-click="$root.initPlaylistOption($event, track.id); $event.stopPropagation();"></i> 
      <i class="fa fa-pause pause-song"></i> 
     </div> 
     <img ng-src="{{(track.albums[0].album_picture? $root.fileServer +'uploads/' + track.albums[0].album_picture:(track.artist.profile_picture? $root.fileServer +'uploads/' + track.artist.profile_picture:'img/defaultalbum.png'))}}" /> 
    </div> 
<!-- <div class="song-title-wrap"> 
    <div class="song-title"> 
     <a class="song-linking" href="#/song/{{track.id}}"> 
      <h4>{{track.title}}</h4> 
      <h5>{{track.artist.user_name}}</h5> 
     </a> 
    </div> 
    </div> --> 
</div> 

Answer 1

含有divにコントローラを追加します。

<div ng-controller='MyController'> 

.song-thumb .hover-play素子

に ngMouseleaveと ngMouseenterを追加

angular.controller('MyController', [ '$scope', function ($scope) { 
    $scope.state = { 
     hoverPlay: false 
    }; 
}]); 

使用ngClassを追加するためのコントローラを追加/クラス

<img ng-class="{ 'hoverclass': state.hoverPlay }" . . . >