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
angular.module(‘myDirective’, []) .controller('Controller', ['$scope', function($scope) { $scope.student = { name: 'Foo', age: '16' }; }]) .directive('myDir', function() { return { restrict: 'AEC', templateUrl: 'my-directive.html' }; });
index.html
<div ng-controller="Controller"> <my-dir></my-dir> </div>
my-dir.html
Name: {{student.name}} Age: {{student.age}}
Result :
Name: Foo Age: 16