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

本文用angularJS简单实现了一个小的按钮提示，按钮点击后会变色，注意html文件中需要引入jquery.js和angular.js
运行截图：

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

css代码：

<style type="text/css">*{margin: 0px;padding: 0px;}.bucSelectedButton{width: 100px;line-height: 30px;text-align: center;position: relative;}.bucSelected {border:1px solid rgb（195,195,195）;color:#000;cursor: pointer;border-radius: 6px;background-color: rgb（255,255,255）;}.bucSelectedHover{border: 1px solid rgb（74,201,255）;color: rgb（74,201,255）;cursor: pointer;border-radius: 6px;background-color: rgb（238,249,254）;}.bucSelectedHover .tip {color: rgb（0,0,0）;background-color: rgb（255,255,255）;} </style>

html代码：

<div ng-controller="bucTipController"> <！-- 指令 --> <buc-button id="numberType" my-title="按钮" tip-title = "这个是提示" style="margin-top:60px;"></buc-button></div>

js代码：

<script type="text/javascript">var app = angular.module（"tip",[]）;app.controller（"bucTipController",function（）{}）.directive（"bucButton",function（）{ return {restrict : "E",replace : true,scope : { myTitle : "@", id : "@", tipTitle : "@"},template : "<button class="bucSelectedButton bucSelected" ng-click="clicked（）" ng-mouseover = "mouseover（）" ng-mouseout = "mouseout（）">{{myTitle}}<div style="border:1px solid #dcdcdc;border-radius:6px;width:auto;height:20px;line-height:20px;position:absolute;top:-40px;padding:5px;white-space:nowrap;background-color:#fafafa;display:none;color:#000;left:20px;" class="tip">{{tipTitle}} <span style="position:absolute;top:25px;left:10px;background-color:#fafafa;border:1px solid #dcdcdc;width:10px;height:10px;transform:rotate（45deg）;border-left:none;border-top:none;"> </span></div></button>",link : function（scope,elem,attrs） { scope.mouseover = function（）{$（".tip"）.show（）; } scope.mouseout = function（）{$（".tip"）.hide（）; } scope.clicked = function（）{elem.toggleClass（"bucSelectedHover"）;$（".tip"）.hide（）; }} }}）</script>

鼠标移入按钮，tip提示出现，鼠标移出的时候，tip消失。tip的小三角我是利用了css3的属性来实现的。
总结
以上就是这篇文章的全部内容，希望对大家学习AngularJS能有所帮助。如果有疑问大家可以留言交流。