AngularJS $compile Service

Last Updated : 23 Jan, 2023

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.

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js">
    </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.

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js">
    </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>