AngularJS 事件绑定(ng-click)

最新推荐文章于 2020-12-10 08:15:31 发布

houyanhua1

最新推荐文章于 2020-12-10 08:15:31 发布

阅读量8.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： AngularJS 文章标签： angularjs 事件绑定 ng-click

本文链接：https://blog.youkuaiyun.com/houyanhua1/article/details/80117435

AngularJS 专栏收录该内容

30 篇文章

订阅专栏

本文详细探讨了AngularJS中的事件绑定机制，重点关注ng-click指令的使用。通过示例代码和解释，展示了如何在AngularJS应用中实现元素的点击事件处理，以及如何传递参数和执行复杂逻辑。

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

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AngularJS</title>
	<script src="angular.min.js"></script>  <!-- 引入AngularJS框架 -->
</head>
<body ng-app="App">
	
	<div ng-controller="DemoController">
		<ul>
			<li><button ng-click="myClick()">单击</button></li>  <!-- ng-click绑定单击事件 -->
			<li><button ng-dblclick="mydblClick()">双击</button></li>  <!-- ng-dblclick双击事件 -->
			<li><input type="text" ng-blur="blur()"></li>   <!-- ng-blur失去焦点 -->
			<li ng-mouseout="mouseout()">一些内容</li>     <!-- ng-mouseout鼠标移出 -->
		</ul>
	</div>

	<script>
		
		var App = angular.module('App',[]);

		App.controller("DemoController",['$scope',function($scope) {
			
			$scope.myClick = function() {  // 事件绑定的函数
				alert('单击了');
			}

			$scope.mydblClick = function() {
				alert('双击了');
			}

			$scope.blur = function() {
				alert('失去焦点');
			}

			$scope.mouseout = function() {
				alert('鼠标移出');
			}

		}]);
		
	</script>
</body>
</html>