angularjs - Angular JS conditional logic to check "class name" exists -

Angular JS code works fine on mouseover below & amp; Mouseout Need help related to adding conditional logos to the JS code.

If the name of the class is "active", then the IMG SRC path should be in "OverIMG", even if the user mouseover & amp; Mouseout However, once the user is removed from the mouseout element on the current behavioral image. The active state should be different from the left navigation element.

Angulojs:

 . Directive ('eleHoverAction', function () {{Link: Function (scope, ELEM, attrs) {var imgObj = $ (ELEM) .find ('img'); upImg = attrs.eleUpImgSrc; overImg = attrs EleOverImgSrc; elem.bind ('mouseover', work () {$ (imgObj) .attr ("src", overImg); radius $ applied ();}); elem.bind ('mouseout', function () { $ (ImgObj) .attr ("src", up img); scope. $ Apply ();});}};});  

HTML:

  & lt; Li class = "menu-item menu-item - category active" ele-hover -action alley-up-img-SRC = "image / test 1 page" ele-over-img-src = "picture / test 1-over page "& Gt; & Lt; A href = "#" & gt; & Lt; Img src = "images / test1.png" oversrc = "images / test1-over.png" alt = "" /> & Lt; Period & gt; Test1's & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "menu-item menu-item-category" Eli-hover action ali-up-img-SRC = "picture / test page 2" ele-over-img-src = "picture / test. 2-over .png" & Gt; & Lt; A href = "#" & gt; & Lt; Img src = "images / test2.png" oversrc = "images / test2-over.png" alt = "" /> & Lt; Period & gt; Test2's & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt;  

The most obvious way is to add if statement to your " MouseUp "handler checks that if hasax is active:

  .directive ('eleHoverAction', function () {return {link: function (scope, ELEM) , Attrs) {var imgObj = elem.find ('img'); upimg = attrs.eleUpImgSrc; overImg = attrs.eleOverImgSrc; elem.bind ('mouseover', function {imgObj.attr ("src",) OverImg); scope $ apply ();}); elem.bind ('mouseout', function () {if (elem.hasClass ("active"!)} {ImgObj.attr ("src", upImg);} Scope $ apply () ;.}); if (elem.hasClass ("active")} {imgObj.attr ("src", overImg);} else {imgObj.attr ("src", upImg);}}} ;});  

I set forth the image's src attribute based on director attributes. If you do not want it, then you can take out that part as well, with the elem wrapping in a jQuery call is unnecessary because the angular element is already in either jQuery (if available when the angular load ) Or wrapped in their own jmlite. Otherwise, you will not be able to call elem.bind .