1. 程式人生 > >AngularJS 事件繫結(ng-click)

AngularJS 事件繫結(ng-click)

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>