Angular mouse-over events (dynamically add class names)

Do not make the dynamic diagram, have to = =

This is roughly the way the mouse moves in the box or the frame, switch to the corresponding style class name, picture, text

Principle: The main is to make judgments, Judge true| | False, and then dynamically change the element style based on its Boolean value

The HTML code is as follows

Green marker fonts are the dependencies that are injected after the script is written

1  <DivID= "Switch"switch= ""> //Fill in the written dependencies 2       <Buttonclass= "Switch"ng-class= "Isweixin?" Off ': ' On ' "ID= "Micro-blog">Community Micro-Blog</Button> //ng-class= ' isweixin to determine if the Boolean value is True or false? ' True to add the class name off ': ' False to add the class name on '; 3       <Buttonclass= "Switch"ng-class= "Isweixin?" On ': ' Off ' "ID= "We-chat">Official</button>  //ng-class= ' The boolean value of Isweixin ' to determine true or false? ' True add class name on ': ' False to add class name ' off ';
4<ang-href= "{{isweixin? ': ' http://weibo.com/u/5640567447 '} 'Target= "_blank"> //ng-href= ' The boolean value of Isweixin ' to determine true or false? ' True address is null ': ' False address is http://weibo.com/u/xxxx ';
5<imgng-src = "{{isweixin? ' Http://image.cheerby.cn/appImage/web/QRcode.jpg ': ' Http://image.cheerby.cn/appImage/web/weibocode.png '}} ">Ng-src= ' Do you know if the Boolean value of Isweixin is true or false? ' True picture address for xxx ': ' false picture address for ' xxx ';
6</a>
7<PID= "Switch-msg"ng-bind= "Isweixin? ' Scan attention eight o'clock to ': ' Click or scan the Focus eight o'clock to Weibo '></P>Ng-bind= ' The Boolean value of Isweixin ' to determine true or false? ' ture bound text for xxx ': ' false bound text for xxx Weibo '
8</Div>

The CSS code is as follows

On class, which is the name of the class to add when the mouse is moved

The off class is the name of the class to be added.

1 #switch{2 2. Switch {3 3 Width:148px;4 4 Height:43px;5 5 Float: Left;6 6 Line-height:43px;7 7 Font-size:20px;8 8 Cursor:Pointer;9 9 Border-right:1px solid @color-green-font;Ten Ten One &.on { A Color:@color-green-font; - Border-top:1px solid @color-green-font; - Border-bottom:None; the  the} - &.off{ - Border-bottom:1px solid @color-green-font; -  -} + + } - img{ + width:163px; A Height:161px; at Margin-top:25px; -  -} - + }

JS code is as follows

1Appdirectives.directive (' Switch ',function($timeout) { //define a dependency, the name is switch, the parameter passed in is equivalent to settimeout, but angular it encapsulates a layer, the equivalent of its own method; 2   return function(scope, element, attrs) { ///callback function, scope is domain, element is elements, Attrs is attribute; 3Scope.isweixin =false; //Initializes a Boolean value of Scope.isweixin to false; 4     varbuttons = element.find (' button '); ///Locate the button element, Element.find (' button ') is #swiper; 5 Buttons.mouseenter (callback). MouseLeave (callback); //button Call callback function when mouse is moved, call callback function again when removing; 6     functioncallback () { //declares a function named callback; 7       varMe = $ ( This); //Declare a variable named me, and the current element is assigned to it; 8$timeout (function() { //Call $timeout Timer method, inside closure means that the index number of the current element is equal to 1 so scope.isweixin=t Rue; 9Scope.isweixin = Me.index () = = 1;Ten       }); One     } A   } -});

Then the judgment is done, and then they are injected into HTML, and now we go back to the HTML page to see the green font

Angular mouse-over events (dynamically add class names)