angularjs - 如何使用 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 解析器代码后，我找不到一种方法来“帮助”它区分破折号和减号。