AngularJS Event Handling with Example ~ Web CodeHelpers

AngularJS Event Handling with Example

creating AngularJS applications, 

your application will need to handle DOM events like 
mouse clicks,
moves,
keyboard presses,
change events etc.

AngularJS has a simple model for how to add event listeners to the HTML you generate from your views. This text will explain this model.

<!DOCTYPE html>
<html lang="en">

<head>
<title>Angular JS Events Sample Code</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

<body ng-app="myapp">

  <div ng-controller="MyController" >
    <div>In this example, i tried to demonstrate the click event</div>
    <div ng-click="myData.doClick()">Click here</div>
</div>

<script>
    angular.module("myapp", [])
            .controller("MyController", function($scope) {
                $scope.myData = {};
                $scope.myData.doClick = function() {
                    alert("clicked");
                }
            } );
</script>

</body>
</html>

0 comments :

Post a Comment

Subscribe updates via Email