Introduction:

Hello Everyone!

Today I am here to tell you about “AngularJS useful directives“. As we learned about many AngularJS directives before, but these are some interesting once. The ng-keyup , ng-keydown and ng-disable are AngularJS useful directives. These directives will work when ever the keyboard key will be pressed. These are also strong directives because they do not need the javascript to control them.

So what do we need for this?

a) We need to make new Project.

b) Want a simple HTML file.

c) The source of AngularJS library.

d) The directives needed for this topic.

Steps:

Step 1) AngularJS Useful Directives:

a) ng-app

This is now a well known directive for you. Because we are using it in all the lectures. Still for those who are new do visit my previous lecture “AngularJS track and strong directives use“.

b) ng-keyup

This is a very useful directive of AngularJS. It works when ever the key is pressed on the keyboard. It will tell us the number of times of keys are pressed. Even if we hold the key for some time it will count it as one instead of giving the number of digits.

c) ng-keydown

This is also a very useful directive of AngularJS. But it is slightly different from the ng-keyup. As defined by it’s name, it will count every time when the key is pressed. even if we just hold the key for some time it will keep increasing the count.

d) ng-disable

This is the tag that disables the object when this event is performed. Suppose you wrote some text in the text area, you can edit it, remove it, cut it or copy it but if this event is called “you will not be able” to perform any function on it.

e) ng-init

We learned about this tag in previous lecture “AngularJS click-init-blur directives use“. You do read it if you don’t know it’s purpose.

The are defined below with the code and images of AngularJS useful directives for your help.

Step 2) The Library Script:

This is the script containing only the source of AngularJS library. See the script below.

The above script contains the source of AngularJS library. This should be added so that the library could be connected with the file.

Step 3) The HTML for

This is the HTML code that you needed for AngularJS useful directives. See below.

Description:

In the above code I placed three input tags and a textarea tag with in div tag. The <br/> tags are used to break the lines. This is a simple code.

Step 4) The Detail Code of AngularJS Useful Directives:

The below is the complete code of AngularJS useful directives. What to add and where to add, all the things are defined below the code.

Description:

As you can see in the above code I made the HTML tag as the owner of AngularJS useful directives app by applying ng-app directive in it as a property.

Further down I added the source of AngularJS library in to the head tag. This source will connect us directly to the library.

I used ng-init tag to take a variable and declare it. If you want to know it’s details do visit my previous lecture “AngularJS click-init-blur directives use“.

As you can see I declared the variable “x” in ng-init and initialized it with “zero”. Then I used ng-keyup directive and made an incremental statement in that variable with one. Then placed this statement equal to the variable. It will do increment when ever the key is pressed.

On the other hand in ng-keydown directive I also made another variable “y” and initialized it with “zero”. I used ng-keyup directive and made an incremental statement in that variable with one. Then placed this statement equal to the variable. It will also do increments when ever the key is pressed but I will tell the number of values entered not the number of time. Before going on further detail I wanted to show this with the help of pictures, it will become more clear to you.

Last important thing I wanted to tell you is that I placed the names of the variables in front of the same statement so that the binding will be performed in AngularJS useful directives code file.

AngularJS useful directives Images View:

a) The Main Image:

The below picture shows three input text areas in AngularJS useful directives file display. The first one will be controlled by ng-keyup directive, the second one will be controlled by the ng-keydown directive and the last one will be of ng-disable directive.

AngularJS useful directives

Description:

So what do we have here? We have the text areas with the counter zero and  textarea with a checkbox. When you will write something in the boxes they will show you your required result. The demanded results are shown below.

b) ng-keyup Image:

The below image will show you your first event. Take a closer look.

AngularJS useful directives

Description:

So what this is showing? This is showing that the first event is performed. As you can see their are a number of values in the box but still the counter tells the number “6”. Why is that so? It is because the digit “6” is pressed for  little longer. I didn’t picked the finger. So that is why it will be counted as one digit.

c) ng-keydown Image:

The below image will show you your second event. Take a closer look.

AngularJS useful directives

Description:

So what the difference we got? As you can see this time counter counted the number of digits I wrote. I pressed the key for a little long time but it still counted the number of values. This is the difference between ng-keyup and ng-keydown.

d) ng-disable Image:

This time we have four pictures. both of them are defining the same event. But I will explain it in three steps for your ease. Do look closely below.

AngularJS useful directives

fig(a)

Description:

As you can see in the fig(a), I wrote a simple text, you can write what ever you wanted to.

Next

AngularJS useful directives

fig(b)

Description:

Now see in fig(b) you can perform any function from the list on the current text. Do any change you like to make.

Next

AngularJS useful directives

fig(c)

Description:

But in fig(c) when the checkbox is checked, the whole portion is high lighted. As the name of directive defines that it will disable all the functions. Just do a fast look and go to the below image.

Next

AngularJS useful directives

fig(d)

Description:

In this picture you can see clearly that all the tags are disabled. This directive gives security of your page. It allows you to save the text from being changed or spoiled. This is a great directive and can be used in many purposes.

Precautions:

Always keep in mind that use the same values for binding other wise the code will not work. Define ng-app for the owner. These are the strong directives they does not need javascript to control them.

Conclusion:

So what do we got today? We learned the basics on ng-keyup and ng-keydown directives. We also learned their difference in detail. We learned the use of ng-disable in detail. So basically we learned three new directives and used them with ng-init directive.