How to change a class to one div hovering over another div using AngularJS?

Question

I want to change the class of one div, hovering over another div using AngularJS directives. Here is what I still have 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 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){ } 

Any ideas?

Answer 1

Change my-class to myclass (i.e. the error is causing the problem).

 <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 CLASS</div> </div> 

Updated: the reason my-class not allowed in the expression because AngularJS treats the dash as a minus character and tries to parse it that way. Apparently, he cannot parse the statement my - class = 'highlight' . Unfortunately, after reading the AngularJS parser code, I cannot find a way to “help” it to distinguish between dashes and minus.

Answer 2

You need to remove the hyphen from my class so that it works correctly in your controller. Also, it seems that basically this is being done. Here is a small snippet - I also added it as text in a div so you can see its change

Your HTML file:

 <div class="{{myClass}}"> {{myClass}} </div> <div class="hover" style="height:50px; width:50px; border:1px solid black;" ng-mouseleave="myClass='test'" ng-mouseenter="myClass='hola'"> </div> 

controller

 function Ctrl($scope){ $scope.myClass="test"; }