本文用angularJS简单实现了一个小的按钮提示，按钮点击后会变色，注意html文件中需要引入jquery.js和angular.js
运行截图：
当点击按钮的时候 按钮的样式改变：
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);}
html代码：
js代码：
var app = angular.module(“tip”,[]);
app.controller(“bucTipController”,function(){
})
.directive(“bucButton”,function(){
return {
restrict : ‘E’,
replace : true,
scope : {
myTitle : “@”,
id : “@”,
tipTitle : “@”
},
template : “{
{myTitle}}\
{tipTitle}}\
\
\
\
“,
link : function(scope,elem,attrs) {
scope.mouseover = function(){
$(“.tip”).show();
}
scope.mouseout = function(){
$(“.tip”).hide();
}
scope.clicked = function(){
elem.toggleClass(“bucSelectedHover”);
$(“.tip”).hide();
}
}
}
})
鼠标移入按钮，tip提示出现，鼠标移出的时候，tip消失。tip的小三角我是利用了css3的属性来实现的。
总结
以上就是这篇文章的全部内容，希望对大家学习AngularJS能有所帮助。如果有疑问大家可以留言交流。