AngularJS 学习笔记一-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_17277/article/details/82565439

本文介绍了一个使用AngularJS创建的互动元素案例，通过自定义指令实现元素在鼠标悬停时随机移动，并展示了完整的HTML和JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!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 随意定义新的元素属性并定义新的属性