<!DOCTYPE html>
<html lang="zh-cn" ng-app="HideAnkSeek">
<head>
<meta charset="UTF-8">
<title>躲猫猫</title>
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<body>
<span class="ng-cloak" wildcat>一碰我就跑~~来点我啊~~</span>
<script src="js/angular-1.2.0rc1/angular.js" type="text/javascript"></script>
<script type="text/javascript">
angular.module("HideAnkSeek", []).directive("wildcat", function ($document) {
var maxLeft = 400,maxTop = 300;
var msg = ["我闪~~", "抓我呀~~~", "雅蠛蝶~~", "噢耶~~", "你真逊~!","就差那么一点点了!","继续吧~~总有一天我会累的"];
return function (scope, element, attr) {
element.css({
"position":"absolute",
"border":"1px solid green"
});
element.bind("mouseenter", function (event) {
element.css({
"left":parseInt(Math.random() * 10000 % maxLeft) + "px",
"top":parseInt(Math.random() * 10000 % maxTop) + "px"
}).text(msg[parseInt(Math.random() * 10000 % msg.length)]);
}).bind("click",function (event) {
element.text("噢 My Lady Gaga。。。被你逮到了。。。");
element.unbind("mouseenter");
});
};
});
</script>
</body>
</html>
<span class="ng-cloak" wildcat>一碰我就跑~~来点我啊~~</span>
wildcat 随意定义新的元素属性 并定义新的属性
分享到:
相关推荐
JS AngularJS 学习笔记 YouTube视频截图
AngularJS学习笔记
(2)新版本然而,因为在angularJs1.3版本中,为了让根节点不再被挂载很多亢余的内容,所以禁止直接在根节点上注册controller (3)setInt
angularjs学习总结,实例介绍,适合初步阶段使用
AngularJS学习笔记.pdf
AngularJS 学习笔记(表单验证篇)的详细代码,内置了angular的1.2.25版所以比较大,eclipse工程,但是可以直接用浏览器打开查看效果的。
学习angular时候从网上博客转为PDF,方便阅读,适合初学者。
AngularJs学习笔记 中文版 适合初学者,比起读英文资料省力
angularjs学习笔记本,请参加http://blog.csdn.net/e891377/article/details/50519971
AngularJS 学习笔记 关于Directive的用法
AngularJS学习笔记,博客园收集整理
angular.js付费学习网站,按章节进行截屏
使用AngularJS制作与用户交互的动态清单列表: 1.使复选框状态与布尔值同步(双向模型绑定) 2.动态显示待办的事项个数 3.根据待办事项数显示不同颜色标签效果 4.响应用户输入
通过Ajax获取JSON数据以我之前写的与用户交互的动态清单列表为例,现在把模型中的数据单独写成一个JSON文件,再通过发起Ajax请求的方式获取JSON数据。这样,清单列表中的数据项就都是通过JSON数据来获取的了。
1. 关于AngularJS 2. 关于本文档 3. 开始的例子 4. 依赖注入 5. 作用域 6. 数据绑定与模板 7. 模板 8. 模板中的过滤器 9. 锚