Custom Directive In AngularJS - Part Three

Before reading this article, I highly recommend reading the previous part of the series on AngularJS:

• Custom Directive in AngularJS - Part One
• Custom Directive in AngularJS - Part Two

In the previous article, we discussed the different types of directives including isolated scope of the directives. Now, in this article, we will discuss the directive scope of the directive. The main advantage of directive scope is that it is areusable component that can easily be used multiple times. Also, we can provide multiple additional values to the directives and also bind those values in directives. For this purpose, we use:

1. “@” scope: This type of scope is used for passing value to the directive scope.
   
   
2. “=” scope: This type of scope is used for passing the variables instead of the scope values. The purpose of doing this is to implement two way binding in the directive.
   
   
3. “&” scope: This type of scope is used for pass the value and its reference to the directives. In this scope, we can pass the expression to the directives.

1. testApp.controller('IndexController', ['$http', function ($http, urlService) {
2. var self = this;
4. self.message = 'Directive Scope';
5. self.priceUnit = 'INR';
6. self.totalUnit = 50;
7. self.args = {
8. quantity: 0
9. };
11. self.validateQuantity = function () {
12. self.priceUnit = 'INR1';
13. if (self.args.quantity == 0) {
14. alert('Put valid quantity no for book');
15. }
16. else {
17. if (self.args.quantity > self.totalUnit) {
18. alert('Booked Qunatity above available Quantity');
19. self.param.quantity = 0;
20. return;
21. }
22. else {
23. alert('Booked Quantity is Available');
24. }
25. }
26. }
27. }]);

Now, run the code and the output will be like below, where we pass the validateQuantity() method to the directive to validate the given quantity. Also, we pass parameters to the directive for other scope variables.

Read more articles on AngularJS: