Mastering Web Application

Chapter 9

The directive definition object for this field directive looks like this:

restrict:'E',

priority: 100,

terminal: true,

compile: function(element, attrs) {

var validationMgs = getValidationValidationMessages(element);

var labelContent = getLabelContent(element);

element.html('');

return function postLink(scope, element, attrs) {

var template = attrs.template || 'input.html';

loadTemplate(template).then(function(templateElement) {

});

};

}

We terminate compilation at this directive, giving it a priority of 100 , to ensure
that it runs before the ng-model directive that will be on the same element. In the
compile function we extract the validation messages, getValidationMessageMap,
and label information, getLabelContent, from the terminated element. Once this
has been retrieved, we empty out the contents of the element so that we have a clean
element in which to load the template. The compile function returns a postLink
function, which will load a suitable template.

Using the terminal property in directives

If a directive has terminal: true, the compiler will stop and not process the child
elements of this directive's element or any other directives on this directive's element
that have a lower priority than this directive.

Even if you terminate a directive, the directive controller, compile

function, and link function for that directive are still executed.

Once we have terminated the compilation we can modify the directive's element
and its children, but then we are responsible for setting up any new scopes, correctly
transcluding content and also for further compiling of child elements that may
contain directives.