Angular Js uses MVW(Model View whatever) Architecture. We can create a dynamic pages using Angular Js. We can extend the HTML functionality using Angular JS directive method. We can extend the HTML with four types
- Element – <my-dir></my-dir>
- Attribute – <div my-dir=”example”></div>
- CSS – <div class=”my-dir”></div>
- Comment
$compile method match the directives based on element, attribute, CSS and comment. Below code will restrict Attribute, Element and CSS
- ‘A’ – only matches attribute name
- ‘E’ – only matches element name
- ‘C’ – only matches class name
- ‘M’ – only matches comment
We can add the restrict as AEC in the directive
Script.js
[javascript]
angular.module(‘myDirective’, [])
.controller(‘Controller’, [‘$scope’, function($scope) {
$scope.student = {
name: ‘Foo’,
age: ’16’
};
}])
.directive(‘myDir’, function() {
return {
restrict: ‘AEC’,
templateUrl: ‘my-directive.html’
};
});
[/javascript]
index.html
[html]
<div ng-controller="Controller">
<my-dir></my-dir>
</div>
[/html]
my-dir.html
[html]
Name: {{student.name}}
Age: {{student.age}}
[/html]
Result :
[html]
Name: Foo
Age: 16
[/html]
