AngularJS Custom Directives Directive Definition Object Template


demoApp.directive('demoDirective', function () {
  var directiveDefinitionObject = {
    scope: {},  
    bindToController: {},
    link: function(){}                                  
  return directiveDefinitionObject;
  1. multiElement - set to true and any DOM nodes between the start and end of the directive name will be collected and grouped together as directive elements
  2. priority - allows specification of the order to apply directives when multiple directives are defined on a single DOM element. Directives with higher numbers are compiled first.
  3. terminal - set to true and the current priority will be the last set of directives to execute
  4. scope - sets scope of the directive
  5. bind to controller - binds scope properties directly to directive controller
  6. controller - controller constructor function
  7. require - require another directive and inject its controller as the fourth argument to the linking function
  8. controllerAs - name reference to the controller in the directive scope to allow the controller to be referenced from the directive template.
  9. restrict - restrict directive to Element, Attribute, Class, or Comment
  10. templateNameSpace - sets document type used by directive template: html, svg, or math. html is the default
  11. template - html markup that defaults to replacing the content of the directive's element, or wraps the contents of the directive element if transclude is true
  12. templateUrl - url provided asynchronously for the template
  13. transclude - Extract the contents of the element where the directive appears and make it available to the directive. The contents are compiled and provided to the directive as a transclusion function.
  14. compile - function to transform the template DOM
  15. link - only used if the compile property is not defined. The link function is responsible for registering DOM listeners as well as updating the DOM. It is executed after the template has been cloned.