Improve this Doc View Source

## Overview

## Methods

- ###

  `directive(name, directiveFactory);`

  Register a new directive with the compiler.

  #### Parameters

  Param | Type | Details
  --- | --- | ---
  name | string Object | 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 Object | Name of the component in camelCase (i.e. `myComp` which will match `<my-comp>`), or an object map of components where the keys are the names and the values are the component definition objects.
  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.

- ###

  `aHrefSanitizationTrustedUrlList([regexp]);`

  Retrieves or overrides the default regular expression that is used for determining trusted 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 `aHrefSanitizationTrustedUrlList` 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 trust urls with.

  #### Returns

  RegExp ng.$compileProvider | Current RegExp if called without value or self for chaining otherwise.

- ###

  `aHrefSanitizationWhitelist();`

  Deprecated: (since 1.8.1)

  This method is deprecated. Use aHrefSanitizationTrustedUrlList instead.

- ###

  `imgSrcSanitizationTrustedUrlList([regexp]);`

  Retrieves or overrides the default regular expression that is used for determining trusted 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 `imgSrcSanitizationTrustedUrlList` 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 trust urls with.

  #### Returns

  RegExp ng.$compileProvider | Current RegExp if called without value or self for chaining otherwise.

- ###

  `imgSrcSanitizationWhitelist();`

  Deprecated: (since 1.8.1)

  This method is deprecated. Use imgSrcSanitizationTrustedUrlList instead.

- ###

  `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
  - `ng-scope` and `ng-isolated-scope` CSS classes
  - `$binding` data property containing an array of the binding expressions
  - Data properties used by the `scope()`/`isolateScope()` methods to return the element's scope.
  - Placeholder comments will contain information about what directive and binding caused the placeholder. E.g. `<!-- ngIf: shouldShow() -->`.

  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

- ###

  `strictComponentBindingsEnabled([enabled]);`

  Call this method to enable / disable the strict component bindings check. If enabled, the compiler will enforce that all scope / controller bindings of a directive / component that are not set as optional with `?`, must be provided when the directive is instantiated. If not provided, the compiler will throw the $compile:missingattr error.

  The default value is false.

  #### Parameters

  Param | Type | Details
  --- | --- | ---
  enabled (optional) | boolean | update the strictComponentBindingsEnabled state if provided, otherwise return the current strictComponentBindingsEnabled 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

  number object | 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

  boolean object | 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

  boolean object | the current value (or `this` if called as a setter for chaining)

- ###

  `addPropertySecurityContext(elementName, propertyName, ctx);`

  Defines the security context for DOM properties bound by ng-prop-*.

  #### Parameters

  Param | Type | Details
  --- | --- | ---
  elementName | string | The element name or '*' to match any element.
  propertyName | string | The DOM property name.
  ctx | string | The `$sce` security context in which this value is safe for use, e.g. `$sce.URL`

  #### Returns

  object | `this` for chaining