Improve this Doc View Source $compileProvider

Methods

• directive(name, directiveFactory);

  Register a new directive with the compiler.

  Parameters

  Param	Type	Details
  name	stringObject	Name of the directive in camel-case (i.e. ngBind which will match as ng-bind), or an object map of directives where the keys are the names and the values are the factories.
  directiveFactory	function()Array	An injectable directive factory function. See the directive guide and the compile API for more info.

  Returns

  ng.$compileProvider

  Self for chaining.

• component(name, options);

  Register a component definition with the compiler. This is a shorthand for registering a special type of directive, which represents a self-contained UI component in your application. Such components are always isolated (i.e. scope: {}) and are always restricted to elements (i.e. restrict: 'E').

  Component definitions are very simple and do not require as much configuration as defining general directives. Component definitions usually consist only of a template and a controller backing it.

  In order to make the definition easier, components enforce best practices like use of controllerAs, bindToController. They always have isolate scope and are restricted to elements.

  Here are a few examples of how you would usually define components:

  var myMod = angular.module(...);
  myMod.component('myComp', {
    template: '<div>My name is {{$ctrl.name}}</div>',
    controller: function() {
      this.name = 'shahar';
    }
  });
  
  myMod.component('myComp', {
    template: '<div>My name is {{$ctrl.name}}</div>',
    bindings: {name: '@'}
  });
  
  myMod.component('myComp', {
    templateUrl: 'views/my-comp.html',
    controller: 'MyCtrl',
    controllerAs: 'ctrl',
    bindings: {name: '@'}
  });
  

  For more examples, and an in-depth guide, see the component guide.

  
  See also $compileProvider.directive().

  Parameters

  Param	Type	Details
  name	string	Name of the component in camelCase (i.e. myComp which will match <my-comp>)
  options	Object	Component definition object (a simplified directive definition object), with the following properties (all optional): controller – {(string|function()=} – controller constructor function that should be associated with newly created scope or the name of a registered controller if passed as a string. An empty noop function by default. controllerAs – {string=} – identifier name for to reference the controller in the component's scope. If present, the controller will be published to scope under the controllerAs name. If not present, this will default to be $ctrl. template – {string=|function()=} – html template as a string or a function that returns an html template as a string which should be used as the contents of this component. Empty string by default. If template is a function, then it is injected with the following locals: $element - Current element $attrs - Current attributes object for the element templateUrl – {string=|function()=} – path or function that returns a path to an html template that should be used as the contents of this component. If templateUrl is a function, then it is injected with the following locals: $element - Current element $attrs - Current attributes object for the element bindings – {object=} – defines bindings between DOM attributes and component properties. Component properties are always bound to the component controller and not to the scope. See bindToController. transclude – {boolean=} – whether content transclusion is enabled. Disabled by default. require - {Object<string, string>=} - requires the controllers of other directives and binds them to this component's controller. The object keys specify the property names under which the required controllers (object values) will be bound. See require. $... – additional properties to attach to the directive factory function and the controller constructor function. (This is used by the component router to annotate)

  Returns

  ng.$compileProvider

  the compile provider itself, for chaining of function calls.

• aHrefSanitizationWhitelist([regexp]);

  Retrieves or overrides the default regular expression that is used for whitelisting of safe urls during a[href] sanitization.

  The sanitization is a security measure aimed at preventing XSS attacks via html links.

  Any url about to be assigned to a[href] via data-binding is first normalized and turned into an absolute url. Afterwards, the url is matched against the aHrefSanitizationWhitelist regular expression. If a match is found, the original url is written into the dom. Otherwise, the absolute url is prefixed with 'unsafe:' string and only then is it written into the DOM.

  Parameters

  Param	Type	Details
  regexp (optional)	RegExp	New regexp to whitelist urls with.

  Returns

  RegExpng.$compileProvider

  Current RegExp if called without value or self for chaining otherwise.

• imgSrcSanitizationWhitelist([regexp]);

  Retrieves or overrides the default regular expression that is used for whitelisting of safe urls during img[src] sanitization.

  The sanitization is a security measure aimed at prevent XSS attacks via html links.

  Any url about to be assigned to img[src] via data-binding is first normalized and turned into an absolute url. Afterwards, the url is matched against the imgSrcSanitizationWhitelist regular expression. If a match is found, the original url is written into the dom. Otherwise, the absolute url is prefixed with 'unsafe:' string and only then is it written into the DOM.

  Parameters

  Param	Type	Details
  regexp (optional)	RegExp	New regexp to whitelist urls with.

  Returns

  RegExpng.$compileProvider

  Current RegExp if called without value or self for chaining otherwise.

• debugInfoEnabled([enabled]);

  Call this method to enable/disable various debug runtime information in the compiler such as adding binding information and a reference to the current scope on to DOM elements. If enabled, the compiler will add the following to DOM elements that have been bound to the scope

  • ng-binding CSS class
  • $binding data property containing an array of the binding expressions

  You may want to disable this in production for a significant performance boost. See Disabling Debug Data for more.

  The default value is true.

  Parameters

  Param	Type	Details
  enabled (optional)	boolean	update the debugInfoEnabled state if provided, otherwise just return the current debugInfoEnabled state

  Returns

  *	current value if used as getter or itself (chaining) if used as setter

• preAssignBindingsEnabled([enabled]);

  Call this method to enable/disable whether directive controllers are assigned bindings before calling the controller's constructor. If enabled (true), the compiler assigns the value of each of the bindings to the properties of the controller object before the constructor of this object is called.

  If disabled (false), the compiler calls the constructor first before assigning bindings.

  The default value is true in Angular 1.5.x but will switch to false in Angular 1.6.x.

  Parameters

  Param	Type	Details
  enabled (optional)	boolean	update the preAssignBindingsEnabled state if provided, otherwise just return the current preAssignBindingsEnabled state

  Returns

  *	current value if used as getter or itself (chaining) if used as setter

• onChangesTtl(limit);

  Sets the number of times $onChanges hooks can trigger new changes before giving up and assuming that the model is unstable.

  The current default is 10 iterations.

  In complex applications it's possible that dependencies between $onChanges hooks and bindings will result in several iterations of calls to these hooks. However if an application needs more than the default 10 iterations to stabilize then you should investigate what is causing the model to continuously change during the $onChanges hook execution.

  Increasing the TTL could have performance implications, so you should not change it without proper justification.

  Parameters

  Param	Type	Details
  limit	number	The number of $onChanges hook iterations.

  Returns

  numberobject

  the current limit (or this if called as a setter for chaining)

• commentDirectivesEnabled(enabled);

  It indicates to the compiler whether or not directives on comments should be compiled. Defaults to true.

  Calling this function with false disables the compilation of directives on comments for the whole application. This results in a compilation performance gain, as the compiler doesn't have to check comments when looking for directives. This should however only be used if you are sure that no comment directives are used in the application (including any 3rd party directives).

  Parameters

  Param	Type	Details
  enabled	boolean	false if the compiler may ignore directives on comments

  Returns

  booleanobject

  the current value (or this if called as a setter for chaining)

• cssClassDirectivesEnabled(enabled);

  It indicates to the compiler whether or not directives on element classes should be compiled. Defaults to true.

  Calling this function with false disables the compilation of directives on element classes for the whole application. This results in a compilation performance gain, as the compiler doesn't have to check element classes when looking for directives. This should however only be used if you are sure that no class directives are used in the application (including any 3rd party directives).

  Parameters

  Param	Type	Details
  enabled	boolean	false if the compiler may ignore directives on element classes

  Returns

  booleanobject

  the current value (or this if called as a setter for chaining)