Improve this Doc View Source $compileProvider

  1. $compile
  2. provider in module ng

Overview

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 stringObject

    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.

  • 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
    • 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

    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)

  • 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

© 2010–2018 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.7.8/docs/api/ng/provider/$compileProvider