本文用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 = "这个是提示"></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 ng-click='clicked()' ng-mouseover = 'mouseover()' ng-mouseout = 'mouseout()'>{{myTitle}} <div>{{tipTitle}} <span> </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能有所帮助。如果有疑问大家可以留言交流。
【AngularJS实现按钮提示与点击变色效果】相关文章：
★ Angular发布1.5正式版，专注于向Angular 2的过渡
★ 动态提示的下拉框
★ 体验jQuery和AngularJS的不同点及AngularJS的迷人之处