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.
<script> // declare a new module, and inject the $compileProvider angular.module('compile', [], function($compileProvider) { // configure new 'compile' directive by passing a directive // factory function. The factory function injects the '$compile' $compileProvider.directive('compile', function($compile) { // directive factory creates a link function return function(scope, element, attrs) { scope.$watch( function(scope) { // watch the 'compile' expression for changes return scope.$eval(attrs.compile); }, function(value) { // when the 'compile' expression changes // assign it into the current DOM element.html(value); // compile the new DOM and link it to the current // scope. // NOTE: we only compile .childNodes so that // we don't get into infinite loop compiling ourselves $compile(element.contents())(scope); } ); }; }) }); function Ctrl($scope) { $scope.name = 'Angular'; $scope.html = 'Hello {{name}}'; } </script> <div ng-controller="Ctrl"> <input ng-model="name"> <br> <textarea ng-model="html"></textarea> <br> <div compile="html"></div> </div>
it('should auto compile', function() { expect(element('div[compile]').text()).toBe('Hello Angular'); input('html').enter('{{name}}!'); expect(element('div[compile]').text()).toBe('Angular!'); });
$compile(element, transclude, maxPriority);
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)
{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 updateh 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:
var element = $compile('<p>{{total}}</p>')(scope);
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.