AngularJS $compile Service
The $compile service in AngularJS is used to compile an HTML template into a function that can be used to link the template to a scope. This service is typically used to compile dynamic templates that are generated on the fly, such as templates that are loaded from the server or created by a directive. There are a few essential points related to the $compile service:
- The $compile service is a core Angular service that is used by directives to compile HTML templates.
- The $compile function returns a linking function that can be used to bind the template to a scope.
- The linking function takes a scope as an argument and returns a DOM element that represents the compiled template.
- The linking function also adds behavior to the element, such as attaching event listeners and setting up data binding.
- The $compile service is typically used when working with directives, as directives often need to manipulate the DOM and bind dynamic HTML to a scope.
- The $compile service is not typically used directly in a controller or service, as it is designed to be used by directives. If you need to dynamically compile HTML in a controller or service, you can inject the $compile service and use it as needed.
Syntax: The $compile service has 2 main methods, i.e., the $compile(element) and $compile(element, transclude) methods.
var linkingFn = $compile(element);
var linkingFn = $compile(element, transclude);
Parameters:
- element: The element parameter is the HTML element that you want to compile.
- transclude: The optional transclude parameter is a function that defines how the element’s children should be transcluded (i.e., how they should be copied into the resulting linking function.
Return type: The $compile function returns a linking function that can be used to bind the template to a scope. The linking function takes a scope as an argument and returns a DOM element that represents the compiled template.
Usage:
app.directive('myDirective', function($compile) {
return {
restrict: 'E',
replace: true,
link: function(scope, element, attrs) {
var template = '<div>Hello {{name}}</div>';
var linkingFn = $compile(template);
var element = linkingFn(scope);
element.append(content);
}
};
});
The $compile service is used as follows:
- We define a template string that contains the HTML we want to compile.
- We call the $compile function, passing in the template as an argument. This returns a linking function.
- We call the linking function, passing in the current scope as an argument. This returns a DOM element that represents the compiled template.
- We append the element to the directive element.
Example 1: This example describes the basic implementation of the AngularJS $compile service.
HTML
<!DOCTYPE html>
< html ng-app = "myApp" >
< head >
< script src =
</ script >
< style >
h1 {
color: green
}
button {
color: white;
background-color: black;
height: 30px;
width: 160px;
padding: 3px;
margin: 5px;
border-radius: 5px;
}
</ style >
</ head >
< body ng-controller = "MyCtrl" >
< center >
< h1 > GeeksforGeeks</ h1 >
< button ng-click = "compileTemplate()" >
Compile Template
</ button >
< div id = "template-container" ></ div >
</ center >
< script >
angular.module('myApp', [])
.controller('MyCtrl', function ($compile, $scope) {
$scope.compileTemplate = function () {
// define the template
let template = '< p >Hello, {{ name }}!</ p >';
// compile the template
let templateFn = $compile(template);
// link the template to a new scope
let templateScope = $scope.$new();
templateScope.name = 'Geeks';
let templateElement = templateFn(templateScope);
// add the template to the DOM
let templateContainer =
document.getElementById('template-container');
templateContainer.appendChild(templateElement[0]);
}
});
</ script >
</ body >
</ html >
|
Output:
Example 2: This is another example that describes the usage of the AngularJS $compile service.
HTML
<!DOCTYPE html>
< html ng-app = "myApp" >
< head >
< script src =
</ script >
< style >
h1 {
color: green;
}
button {
color: white;
background-color: black;
height: 30px;
width: 160px;
padding: 3px;
margin: 5px;
border-radius: 5px;
}
</ style >
</ head >
< body ng-controller = "MyController" >
< center >
< h1 >GeeksforGeeks</ h1 >
< my-directive user = "user" ></ my-directive >
</ center >
< script >
angular.module('myApp', [])
.directive('myDirective', function ($compile) {
return {
restrict: 'E',
scope: {
user: '='
},
template: '< div >' +
'< h3 >Name: {{user.name}}</ h3 >' +
'< button ng-click="showDetails '+
'= !showDetails">Toggle details</ button >' +
'< div ng-if = "showDetails" >' +
'< p >Age: {{user.age}}</ p >' +
'< p >Email: {{user.email}}</ p >' +
'< p >Address: {{user.address}}</ p >' +
'< p >Phone: {{user.phone}}</ p >' +
'</ div >' +
'</ div >',
link: function (scope, element, attrs) {
scope.showDetails = false;
var template = '< div >' +
'</ div >';
var linkingFn = $compile(template);
var detailsElement = linkingFn(scope);
element.append(detailsElement);
}
};
})
.controller('MyController', function ($scope) {
$scope.user = {
name: 'Geek',
age: 25,
email: 'Geeks@example.com',
address: 'Door no-101, Delhi',
phone: '999999999999'
};
});
</ script >
</ body >
</ html >
|
Output:
Reference: https://docs.angularjs.org/api/ng/service/$compile
Last Updated :
23 Jan, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...