angularjs - 无法在 Angular js 鼠标悬停事件中访问我的选择器

Question

我无法访问 div 内的 li 元素。我向 li 添加了 mouseover 事件，但它仅绑定到其父 div。

HTML：

<div>
    <ul class="rating">
           <li ng-repeat="star in stars" ng-class="star" ng-click="toggle($index)"       
              ng-mouseover="starHover($index)" id="$index"> \u2605'
           </li>
    </ul>
</div>

JS指令链接鼠标悬停功能：

scope.starHover = function(index) 
{
     elem.addClass('unfill').removeClass('filled');
}

我想访问鼠标悬停的 li 和 nextAll li。

Answer 1

不要在范围内做，在指令里做。像这样更改您的li标签：

 <li ng-repeat="star in stars" ng-class="star" ng-click="toggle($index)" id="$index" mousable >  <!-- ... -->  </li>

并创建mousable这样的指令：

 yourApp.directive('mousable', function () {    
     return {       
         link: function(scope, element, attrs , ctrl) {
               element.bind("mouseover", function(e){    
                     element.addClass('unfill').removeClass('filled');
               });
               element.bind("mouseout", function(e){
                     element.addClass('filled').removeClass('unfill');
               });    
          }
      }
  }

参考资料： http:
//docs.angularjs.org/api/angular.element
http://docs.angularjs.org/guide/directive

Answer 2

Do it the angular way:

<div>
    <ul class="rating">
           <li ng-repeat="star in stars" ng-class="{star: true, unfill: hovered, filled: !hovered}" ng-click="toggle($index)"       
              ng-mouseenter="hovered = true" ng-mouseleave="hovered = false" id="$index"> \u2605'
           </li>
    </ul>
</div>

http://jsfiddle.net/AVCT4/