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
Please Login to comment...