Question

尝试使用下面的jQuery方法：但这在我的Angular环境中不起作用，假设因为我试图在角度JS范围方法之外做这个，但我不知道如何实现这个使用Angular范围方法（新到角度）任何建议？

      $('.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'>

将ngMouseleave和ngMouseenter添加到.song-thumb .hover-play元素

<div class="hover-play" ng-if="$root.currentPlaying.song_id != track.id" ng-click="$root.playSong(track);" ng-mouseenter='state.hoverPlay=true;' ng-mouseleave='state.hoverPlay=false'>

添加控制器

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

使用ngClass添加/删除班级

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

将鼠标悬停在一个元素上，将addClass悬停在Angular JS中的其他元素上

1 个答案: