Improve this Doc View Source

## Overview

Compiles a string with markup into an interpolation function. This service is used by the HTML $compile service for data binding. See $interpolateProvider for configuring the interpolation markup.

    var $interpolate = ...; // injected
    var exp = $interpolate('Hello {{name | uppercase}}!');
    expect(exp({name:'AngularJS'})).toEqual('Hello ANGULAR!');

`$interpolate` takes an optional fourth argument, `allOrNothing`. If `allOrNothing` is `true`, the interpolation function will return `undefined` unless all embedded expressions evaluate to a value other than `undefined`.

    var $interpolate = ...; // injected
    var context = {greeting: 'Hello', name: undefined };

    // default "forgiving" mode
    var exp = $interpolate('{{greeting}} {{name}}!');
    expect(exp(context)).toEqual('Hello !');

    // "allOrNothing" mode
    exp = $interpolate('{{greeting}} {{name}}!', false, null, true);
    expect(exp(context)).toBeUndefined();
    context.name = 'AngularJS';
    expect(exp(context)).toEqual('Hello AngularJS!');

`allOrNothing` is useful for interpolating URLs. `ngSrc` and `ngSrcset` use this behavior.

#### Escaped Interpolation

$interpolate provides a mechanism for escaping interpolation markers. Start and end markers can be escaped by preceding each of their characters with a REVERSE SOLIDUS U+005C (backslash). It will be rendered as a regular start/end marker, and will not be interpreted as an expression or binding.

This enables web-servers to prevent script injection attacks and defacing attacks, to some degree, while also enabling code examples to work without relying on the ngNonBindable directive.

For security purposes, it is strongly encouraged that web servers escape user-supplied data, replacing angle brackets (<, >) with &lt; and &gt; respectively, and replacing all interpolation start/end markers with their escaped counterparts.

Escaped interpolation markers are only replaced with the actual interpolation markers in rendered output when the $interpolate service processes the text. So, for HTML elements interpolated by $compile, or otherwise interpolated with the `mustHaveExpression` parameter set to `true`, the interpolated text must contain an unescaped interpolation expression. As such, this is typically useful only when user-data is used in rendering a template from the server, or when otherwise untrusted data is used by a directive.

    <div ng-init="username='A user'">
      <p ng-init="apptitle='Escaping demo'">{{apptitle}}: \{\{ username = "defaced value"; \}\}
        </p>
      <p><strong>{{username}}</strong> attempts to inject code which will deface the
        application, but fails to accomplish their task, because the server has correctly
        escaped the interpolation start/end markers with REVERSE SOLIDUS U+005C (backslash)
        characters.</p>
      <p>Instead, the result of the attempted script injection is visible, and can be removed
        from the database by an administrator.</p>
    </div>

## Known Issues

It is currently not possible for an interpolated expression to contain the interpolation end symbol. For example, `{{ '}}' }}` will be incorrectly interpreted as `{{ ' }}` + `' }}`, i.e. an interpolated expression consisting of a single-quote (`'`) and the `' }}` string.

All directives and components must use the standard `{{` `}}` interpolation symbols in their templates. If you change the application interpolation symbols the `$compile` service will attempt to denormalize the standard symbols to the custom symbols. The denormalization process is not clever enough to know not to replace instances of the standard symbols where they would not normally be treated as interpolation symbols. For example in the following code snippet the closing braces of the literal object will get incorrectly denormalized:

    <div data-context='{"context":{"id":3,"type":"page"}}">

The workaround is to ensure that such instances are separated by whitespace:

    <div data-context='{"context":{"id":3,"type":"page"} }">

See https://github.com/angular/angular.js/pull/14610#issuecomment-219401099 for more information.

## Dependencies

- `$parse`
- `$sce`

## Usage

`$interpolate(text, [mustHaveExpression], [trustedContext], [allOrNothing]);`

### Arguments

Param | Type | Details
--- | --- | ---
text | string | The text with markup to interpolate.
mustHaveExpression (optional) | boolean | if set to true then the interpolation string must have embedded expression in order to return an interpolation function. Strings with no embedded expression will return null for the interpolation function.
trustedContext (optional) | string | when provided, the returned function passes the interpolated result through $sce.getTrusted(interpolatedResult, trustedContext) before returning it. Refer to the $sce service that provides Strict Contextual Escaping for details.
allOrNothing (optional) | boolean | if `true`, then the returned function returns undefined unless all embedded expressions evaluate to a value other than `undefined`.

### Returns

function(context)

an interpolation function which is used to compute the interpolated string. The function has these parameters:

- `context`: evaluation context for all expressions embedded in the interpolated text

## Methods

- ###

  `startSymbol();`

  Symbol to denote the start of expression in the interpolated string. Defaults to `{{`.

  Use `$interpolateProvider.startSymbol` to change the symbol.

  #### Returns

  string | start symbol.

- ###

  `endSymbol();`

  Symbol to denote the end of expression in the interpolated string. Defaults to `}}`.

  Use `$interpolateProvider.endSymbol` to change the symbol.

  #### Returns

  string | end symbol.