7

AngularJS ディレクティブを使用して別の div にカーソルを合わせながら、ある div のクラスを変更したいと考えています。これが私がこれまでに持っているものですhttp://jsfiddle.net/E8nM5/38/

HTML

<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){
}

何か案は？

4

2 に答える 2

6

に変更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 パーサー コードを読んだ後、ダッシュとマイナスを区別するのに「役立つ」方法が見つかりません。

于 2013-08-22T20:57:48.833 に答える