Introduction
This article explains the .directive and .filter service in AngularJS.
Angular provides many kinds of services, two of them are directive and filter. In this article I will show you an application in which both of the services are used.
Step 1
First of all you need to add an external Angular.js file to your application, in other words "angular.min.js".
For this you can go to the AngularJS official site or can download my source code and then fetch it or you can click on this link to download it: ANGULARJS.
After downloading the external file you need to add this file to the Head section of your application.
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
Step 2
Now after adding the External JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
Now I will work on the JavaScript function, write this code in the head section:
<script>
var x = angular.module('x', []);
function ctrl($scope) {
$scope.name = 'testing';
}
angular.module('mod', [])
.filter('ifarray', function () {
return function (input) {
return $.isArray(input) ? input : [];
}
})
.directive('list', function ($compile) {
return {
restrict: 'E',
terminal: true,
scope: { val: 'evaluate' },
link: function (scope, element, attrs) {
if (angular.isArray(scope.val)) {
element.append('<div>+ <div ng-repeat="v in val"><list val="v"></list></div></div>');
} else {
element.append(' - {{val}}');
}
$compile(element.contents())(scope.$new());
}
}
});
angular.module('x', ['mod']);
</script>
Here I created a module whose name is "x", this module will be called in the ng-app directive.
After this I created a function whose name is "ctrl", in this function one initial value is passed in the variable "name".
After creating the function I used the filter and directive services, in the directive service I passed restrict as "E", earlier in my previous articles I told you that restrict can be any of the three types "A, E and AE". "E" will match the element name only.
In this directive service I applied an "if" loop that will check whether or not the Array is used, if the array is used then it will append some controls to the element. I used a <list> control that is not a control, it's a customized control that is not available in HTML.
Step 3
Now our work on JavaScript is completed and we can move to the design part of our application.
Write this code in the body section:
<body>
<form ng-app="x" id="form1" runat="server">
<pre>
<list val="['item1','item2',['item3','item4']]">
</list>
</pre>
</form>
</body>
Here I bound the module name with the form using the ng-app directive.
I used the custom element that was declared in the second step, in this <list> I bound some initial values that will be seen in the output window.
Now our application is created and is ready for execution.
Output
On running the application you will get an output like this:
![directive and filter service in angularjs]()
You can see that the <list> is showing the output but it was not any official element.
The complete code of this application is as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="JavaScript1.js"></script>
<script>
var x = angular.module('x', []);
function ctrl($scope) {
$scope.name = 'testing';
}
angular.module('mod', [])
.filter('ifarray', function () {
return function (input) {
return $.isArray(input) ? input : [];
}
})
.directive('list', function ($compile) {
return {
restrict: 'E',
terminal: true,
scope: { val: 'evaluate' },
link: function (scope, element, attrs) {
if (angular.isArray(scope.val)) {
element.append('<div>+ <div ng-repeat="v in val"><list val="v"></list></div></div>');
} else {
element.append(' - {{val}}');
}
$compile(element.contents())(scope.$new());
}
}
});
angular.module('x', ['mod']);
</script>
</head>
<body>
<form ng-app="x" id="form1" runat="server">
<pre>
<list val="['item1','item2',['item3','item4']]">
</list>
</pre>
</form>
</body>
</html>