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.
 

Output:

 

Example 2: This is another example that describes the usage of the AngularJS $compile service.

Output:

 

Reference: https://docs.angularjs.org/api/ng/service/$compile