AngularJS实现按钮提示与点击变色效果

本文用angularJS简单实现了一个小的按钮提示，按钮点击后会变色，注意超文本标记语言文件中需要引入jquery.js和angular.js

运行截图：

当点击按钮的时候按钮的样式改变：

钢性铸铁代码：

样式类型=' text/CSS ' * { margin : 0px；padding: 0px }。bucselected button { width : 100 px；线高： 30px文本对齐：中心；相对位置：} .bucSelected {border:1px固态rgb(195，195，195)；color: # 000cursor:指针；边界半径： 6px背景-color: rgb(255，255，255)；} .bucSelectedHover {边框： 1px固态rgb(74，201，255)；color: rgb(74，201，255)；光标：指针；边界半径： 6px背景色-: RGB(238，249，254)；} .bucSelectedHover .tip {color: rgb(0，0，0)；背景-color: rgb(255，255，255)；} /stylehtml代码：

div ng-controller=' bucTipController '！-指令-buc-button id=' NumberType ' my-title='按钮提示-标题='这个是提示style=' margin-top :60 px；'/buc-button/divjs代码：

脚本类型=' text/JavaScript ' var app=angular。模块(' tip '，[])；app。控制器(' bucTipController '，function(){}).指令(“bucButton”，函数(){返回{限制： 'E '，替换： true，作用域： { myTitle : '@ '，id : '@ '，tipTitle : '@' }，模板： ' button class=' bucselectedb button bucSelected ' ng-click=' clicked()' ng-鼠标悬停='鼠标悬停()' ng-鼠标移出='鼠标移出()' { { myTitle } } \ div style=' border-radius :6 px；宽度：汽车；高度：20 px线高：20 px位置：绝对；top :-40px；padd :5 px空白：无rap背景-color : # fafafa；display : none color : # 000 ' left :20 px ' class=' tip " { tip title } } \ span style=' position : absolute；top:25pxleft:10px背景-color : # fafafa；border:1px实心# dcdcdc宽度：10 px高度：10px变压器：旋转(45度);边框-左侧：无边框-top :无；\ /span\ /div\ /button '，链接：函数(作用域、elem、attrs){作用域。鼠标悬停在=function(){ $(')上.提示')。show()；} scope.mouseout=function(){ $(' .提示')。hide()；}范围。clicked=function(){ elem。toggle class(' bucSelectedHover ')；$('.提示')。hide()；} } } })/脚本鼠标移入按钮，提示提示出现，鼠标移出的时候，提示消失小费。的小三角我是利用了css3的属性来实现的。

总结

以上就是这篇文章的全部内容，希望对大家学习AngularJS能有所帮助。如果有疑问大家可以留言交流。