Skip to content

Commit aec9965

Browse files
bennadelbennadel
committed
Add event properties demo.
1 parent 692944c commit aec9965

3 files changed

Lines changed: 91 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Consuming Event Properties From Within The View In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/consuming-event-properties-in-view-angularjs/)
1314
* [Managing A Shared Global UI Component In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/managing-globally-shared-directive-angularjs/)
1415
* [Scattering Letters Based On Mouse Movements In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/design-disruptors-letters-angularjs/)
1516
* [Watching ngModel Changes In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/ng-model-vs-watch-angularjs/)

‎demos/consuming-event-properties-in-view-angularjs/demo.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
div.logger {
3+
border: 1px dashed #CCCCCC ;
4+
border-radius: 10px 10px 10px 10px ;
5+
bottom: 30px ;
6+
left: 30px ;
7+
padding: 30px ;
8+
position: fixed ;
9+
right: 30px ;
10+
top: 80px ;
11+
}

‎demos/consuming-event-properties-in-view-angularjs/index.htm‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!doctype html>
2+
<html ng-app="Demo">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Consuming Event Properties From Within The View In AngularJS
8+
</title>
9+
10+
<link rel="stylesheet" type="text/css" href="./demo.css"></link>
11+
</head>
12+
<body ng-controller="AppController as vm">
13+
14+
<h1>
15+
Consuming Event Properties From Within The View In AngularJS
16+
</h1>
17+
18+
<!--
19+
The reason that you can pass the $event object from the view into the methods
20+
is because it is being exposed as a "locals" override by the directives (ex,
21+
ngClick, ngKeypress) when evaluating your directive expression (pseudo code):
22+
23+
`scope.$eval( attributes.ngClick, { $event: event } )`
24+
25+
However, that means that you can also consume the event object properties
26+
directly as part of the same method invocations (as opposed to passing in the
27+
entire $event object).
28+
-->
29+
<div
30+
ng-click="vm.logClick( $event.pageX, $event.pageY )"
31+
ng-keypress="vm.logKey( $event.which, $event.metaKey )"
32+
contenteditable="true"
33+
class="logger">
34+
<!-- Events will be logged to console. -->
35+
</div>
36+
37+
<!-- Load scripts. -->
38+
<script type="text/javascript" src="../../vendor/angularjs/angular-1.4.7.min.js"></script>
39+
<script type="text/javascript">
40+
41+
// I control the root of the application.
42+
angular.module( "Demo", [] ).controller(
43+
"AppController",
44+
function AppController( $scope ) {
45+
46+
var vm = this;
47+
48+
// Expose public methods.
49+
vm.logClick = logClick;
50+
vm.logKey = logKey;
51+
52+
53+
// ---
54+
// PUBLIC METHODS.
55+
// ---
56+
57+
58+
// I log the given click coordinates.
59+
function logClick( x, y ) {
60+
61+
console.log( "Click:", x, y );
62+
63+
}
64+
65+
66+
// I log the given key characters.
67+
function logKey( keyCode, isMetaKey ) {
68+
69+
console.log( "Key:", String.fromCharCode( keyCode ), keyCode, isMetaKey );
70+
71+
}
72+
73+
}
74+
);
75+
76+
</script>
77+
78+
</body>
79+
</html>

0 commit comments

Comments
 (0)