AngularJS鼠标进入划出事件

最新推荐文章于 2023-03-03 11:52:24 发布

转载最新推荐文章于 2023-03-03 11:52:24 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/mcyy568/blog/719226

文章标签：

#javascript #python #ViewUI

本文介绍了一个使用AngularJS自定义指令的实例。通过创建一个名为'hello'的指令，当鼠标进入和离开元素时，会在控制台输出相应的消息。此示例展示了如何利用AngularJS模块化特性增强网页交互。

2019独角兽企业重金招聘Python工程师标准>>>

link1.html

<!doctype html>
<html ng-app="MyModule">
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<hello>Hi everyone!</hello>
	</body>
	<script src="framework/angular-1.3.0.14/angular.js"></script>
	<script src="link1.js"></script>
</html>

link1.js

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function () {
    return {
        restrict: "AE",
        link: function (scope, element) {
            console.log(element);
            element.bind("mouseenter", function () {
                console.log("鼠标进入...");
            });
            element.bind("mouseout", function () {
                console.log("鼠标滑出...");
            });
        }
    }
});

转载于:https://my.oschina.net/mcyy568/blog/719226