如何在使用AngularJS将鼠标悬停在另一个div上时更改一个div上的类？

Question

我想使用AngularJS指令将鼠标悬停在另一个div上时更改一个div的类.以下是我到目前为止的情况http://jsfiddle.net/E8nM5/38/

HMTL

<div ng-controller="Ctrl" ng-app>
   <div ng-class="my-class">This div will change class when one hovers over bottom DIV </div>
   <br/>
   <div class="hover-div" ng-mouseenter="my-class = 'highlight'" ng-mouseleave="my-class = 'lowlight'">HOVER OVER ME TO CHANGE THE UPPER DIV's CLASS</div>    
</div>

CSS

div.highlight {
    padding: 10px;
    background: red;
    color: white;
}

div.lowlight {
    padding: 10px;
    background: blue;
    color: white;
}

div.hover-div {
    padding: 10px;
    background: green;
    color: white;
}

JS

function Ctrl($scope){
}

有任何想法吗？

Answer 1

更改my-class到myclass(即破折号引起的问题).

<div ng-controller="Ctrl" ng-app>
    <div ng-class="myclass">This div will change class when one hovers over bottom DIV </div>
    <br/>
    <div class="hover-div" ng-mouseenter="myclass = 'highlight'" ng-mouseleave="myclass = 'lowlight'">HOVER OVER ME TO CHANGE THE UPPER DIV's CLASS</div>    
</div>

更新:my-class表达式中不允许的原因是因为AngularJS将短划线视为减号,并尝试以这种方式解析它.显然,它无法解析声明my - class = 'highlight'.不幸的是,在阅读AngularJS解析器代码后,我找不到一种"帮助"区分破折号和减号的方法.