Here is a quick angular directive escape key function on a div that I found somewhere (if you know the source let me know so I can give credit. It is quite a simple directive that allows you to apply it to a div or any element and assign a function for it to call.
The Directive:
app.directive('ngEsc', function () {
return function (scope, element, attrs) {
element.bind("keydown keypress keyup", function (event) {
if(event.which === 27) {
scope.$apply(function (){
scope.$eval(attrs.ngEsc);
});
event.preventDefault();
}
});
};
});
Now applying the directive to an element looks like this:
//Note the tabindex="0" gives the div focus.
<div ng-esc="closeLightBoxWithEsc()" tabindex="0"></div>
Finally, the function we are calling:
$scope.closeLightBoxWithEsc = function(){
//Anything your heart desires.
};
Let’s take a look at a simple AngularJs directive to start getting an understanding of how directives work and how AngularJs uses them. As discussed in the previous angular post, we have to mark some outer element on the page as ng-app. A little refresher, this tells angular that it needs to run through all of the DOM elements looking for directives. Once it locates all of the directives, they are associated with those DOM elements and will run now.
So what is a directive? In the simplest form, it is essentially just a function that is tied to the DOM and gets run when the DOM gets compiled. There are multiple ways to denote a DOM element with a directive. One of the more common ways it’s done, is just like putting ng-app directive in the body tag. Lets say we have a directive called angularDatePicker; you could mark a element like follows:
<span angularDatePicker></span>
It is as simple as that, now every time the DOM is compiled, angular will see that directive and execute it on that span each time. Now lets take a look at a data binding and model example. Two built in directives that AngularJS gives us are ng-model and ng-bind. They are more or less just different ways of invoking your own directive. In the follow snippet. You will notice that when you type in the input box, the type is bound and output on in the divs denoted by these 3 different, valid, bind methods.
There are two more way to do the same binding but the only difference is they are the only 2 that are HTML5 compliant and should pass HTML5 validators.
Recent Comments