Introduction To AngularJS – Day 6

The above code you can see we are using here two directives ‘ng-show’ and ‘ng-click’. In ‘ng-click’ directive we added new behavior, i.e. when you click on button it call function ‘ShowMe()’ of controller. Like properties if you have to use function in view that time you have to create a function using the ‘$scope’ object. And another directive is used for displaying the text like the directive names define its own, ‘ng-show’ means you have to work on some hide and show functionality on view. That time we use this directive with ‘true’ or ‘false’ value for that directive.



When we run the code sample above it shows output like the following,


After clicking the above ‘ShowMe’ button call goes to controller. Here's the image and value is set to ‘true’ and text will be displayed.



You can see in the preceding image that when I click on button ‘ng-click’ event calls the controller function.



After resuming the debugging output like above you can see that the newly added text is ‘ng-click directive example’.

Using ng-disabled directive

The ng-disabled directive can disable elements based on the Boolean value of anexpression. For that see the following example,
We are using same example and just added the new directive to button tag i.e. ‘ng-disable’ and set value to ‘true’ like the following image,



After executing the above code you can see the following output but the button ‘ShowMe’ is disable.



Great, we learned various built in directives in AngularJS with example successfully.

Summary

I hope that beginners as well as students understand the concept of Directives in AngularJS with example. If you have any suggestion regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon.

Thanks for reading.