Description

Compiles a piece of HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

The compilation is a process of walking the DOM tree and trying to match DOM elements to directives. For each match it executes corresponding template function and collects the instance functions into a single template function which is then returned.

The template function can then be used once to produce the view or as it is the case with repeater many-times, in which case each call results in a view that is a DOM clone of the original template.

Source

Demo

Usage

$compile(element, transclude, maxPriority);

Parameters

element – {string|DOMElement} –
Element or HTML string to compile into a template function.
transclude – {function(angular.Scope[, cloneAttachFn]} –
function available to directives.
maxPriority – {number} –
only apply directives lower then given priority (Only effects the root element(s), not their children)

Returns

{function(scope[, cloneAttachFn])} –

a link function which is used to bind template (a DOM element/tree) to a scope. Where:

scope - A Scope to bind to.
cloneAttachFn - If cloneAttachFn is provided, then the link function will clone the template and call the cloneAttachFn function allowing the caller to attach the cloned elements to the DOM document at the appropriate place. The cloneAttachFn is called as:
cloneAttachFn(clonedElement, scope) where:
- clonedElement - is a clone of the original element passed into the compiler.
- scope - is the current scope with which the linking function is working with.

Calling the linking function returns the element of the template. It is either the original element passed in, or the clone of the element if the cloneAttachFn is provided.

After linking the view is not updated until after a call to $digest which typically is done by Angular automatically.

If you need access to the bound view, there are two ways to do it:

If you are not asking the linking function to clone the template, create the DOM element(s) before you send them to the compiler and keep this reference around.
```
    var element = $compile('<p>{{total}}</p>')(scope);
  
```

if on the other hand, you need the element to be cloned, the view reference from the original example would not point to the clone, but rather to the original template that was cloned. In this case, you can access the clone via the cloneAttachFn:

    var templateHTML = angular.element('<p>{{total}}</p>'),
        scope = ....;

    var clonedElement = $compile(templateHTML)(scope, function(clonedElement, scope) {
      //attach the clone to DOM document at the right place
    });

    //now we have reference to the cloned DOM via `clone`

For information on how the compiler works, see the Angular HTML Compiler section of the Developer Guide.