direktori cari
AngularJS API Reference auto auto/service auto/service/$injector auto/service/$provide ng ng/directive ng/directive/a ng/directive/form ng/directive/input ng/directive/input[checkbox] ng/directive/input[date] ng/directive/input[dateTimeLocal] ng/directive/input[email] ng/directive/input[month] ng/directive/input[number] ng/directive/input[radio] ng/directive/input[text] ng/directive/input[time] ng/directive/input[url] ng/directive/input[week] ng/directive/ngApp ng/directive/ngBind ng/directive/ngBindHtml ng/directive/ngBindTemplate ng/directive/ngBlur ng/directive/ngChange ng/directive/ngChecked ng/directive/ngClass ng/directive/ngClassEven ng/directive/ngClassOdd ng/directive/ngClick ng/directive/ngCloak ng/directive/ngController ng/directive/ngCopy ng/directive/ngCsp ng/directive/ngCut ng/directive/ngDblclick ng/directive/ngDisabled ng/directive/ngFocus ng/directive/ngForm ng/directive/ngHide ng/directive/ngHref ng/directive/ngIf ng/directive/ngInclude ng/directive/ngInit ng/directive/ngKeydown ng/directive/ngKeypress ng/directive/ngKeyup ng/directive/ngList ng/directive/ngModel ng/directive/ngModelOptions ng/directive/ngMousedown ng/directive/ngMouseenter ng/directive/ngMouseleave ng/directive/ngMousemove ng/directive/ngMouseover ng/directive/ngMouseup ng/directive/ngNonBindable ng/directive/ngOpen ng/directive/ngPaste ng/directive/ngPluralize ng/directive/ngReadonly ng/directive/ngRepeat ng/directive/ngSelected ng/directive/ngShow ng/directive/ngSrc ng/directive/ngSrcset ng/directive/ngStyle ng/directive/ngSubmit ng/directive/ngSwitch ng/directive/ngTransclude ng/directive/ngValue ng/directive/script ng/directive/select ng/directive/textarea ng/filter ng/filter/currency ng/filter/date ng/filter/filter ng/filter/json ng/filter/limitTo ng/filter/lowercase ng/filter/number ng/filter/orderBy ng/filter/uppercase ng/function ng/function/angular.bind ng/function/angular.bootstrap ng/function/angular.copy ng/function/angular.element ng/function/angular.equals ng/function/angular.extend ng/function/angular.forEach ng/function/angular.fromJson ng/function/angular.identity ng/function/angular.injector ng/function/angular.isArray ng/function/angular.isDate ng/function/angular.isDefined ng/function/angular.isElement ng/function/angular.isFunction ng/function/angular.isNumber ng/function/angular.isObject ng/function/angular.isString ng/function/angular.isUndefined ng/function/angular.lowercase ng/function/angular.module ng/function/angular.noop ng/function/angular.toJson ng/function/angular.uppercase ng/object ng/object/angular.version ng/provider ng/provider/$animateProvider ng/provider/$compileProvider ng/provider/$controllerProvider ng/provider/$filterProvider ng/provider/$httpProvider ng/provider/$interpolateProvider ng/provider/$locationProvider ng/provider/$logProvider ng/provider/$parseProvider ng/provider/$rootScopeProvider ng/provider/$sceDelegateProvider ng/provider/$sceProvider ng/service ng/service/$anchorScroll ng/service/$animate ng/service/$cacheFactory ng/service/$compile ng/service/$controller ng/service/$document ng/service/$exceptionHandler ng/service/$filter ng/service/$http ng/service/$httpBackend ng/service/$interpolate ng/service/$interval ng/service/$locale ng/service/$location ng/service/$log ng/service/$parse ng/service/$q ng/service/$rootElement ng/service/$rootScope ng/service/$sce ng/service/$sceDelegate ng/service/$templateCache ng/service/$timeout ng/service/$window ng/type ng/type/$cacheFactory.Cache ng/type/$compile.directive.Attributes ng/type/$rootScope.Scope ng/type/angular.Module ng/type/form.FormController ng/type/ngModel.NgModelController ngAnimate ngAnimate/provider ngAnimate/provider/$animateProvider ngAnimate/service ngAnimate/service/$animate ngCookies ngCookies/service ngCookies/service/$cookies ngCookies/service/$cookieStore ngMessages ngMessages/directive ngMessages/directive/ngMessage ngMessages/directive/ngMessages ngMock ngMock/function ngMock/function/angular.mock.dump ngMock/function/angular.mock.inject ngMock/function/angular.mock.module ngMock/object ngMock/object/angular.mock ngMock/provider ngMock/provider/$exceptionHandlerProvider ngMock/service ngMock/service/$exceptionHandler ngMock/service/$httpBackend ngMock/service/$interval ngMock/service/$log ngMock/service/$timeout ngMock/type ngMock/type/angular.mock.TzDate ngMockE2E ngMockE2E/service ngMockE2E/service/$httpBackend ngResource ngResource/service ngResource/service/$resource ngRoute ngRoute/directive ngRoute/directive/ngView ngRoute/provider ngRoute/provider/$routeProvider ngRoute/service ngRoute/service/$route ngRoute/service/$routeParams ngSanitize ngSanitize/filter ngSanitize/filter/linky ngSanitize/service ngSanitize/service/$sanitize ngTouch ngTouch/directive ngTouch/directive/ngClick ngTouch/directive/ngSwipeLeft ngTouch/directive/ngSwipeRight ngTouch/service ngTouch/service/$swipe
watak

AngularJS: API: ng/service/$interpolate


$interpolate

  1. - $interpolateProvider
  2. - service in module ng

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=...;// injectedvarexp=$interpolate('Hello {{name | uppercase}}!');expect(exp({name:'Angular'}).toEqual('Hello ANGULAR!');

$interpolatetakes an optional fourth argument,allOrNothing. IfallOrNothingistrue, the interpolation function will returnundefinedunless all embedded expressions evaluate to a value other thanundefined.

var$interpolate=...;// injectedvarcontext={greeting:'Hello',name:undefined};// default "forgiving" modevarexp=$interpolate('{{greeting}} {{name}}!');expect(exp(context)).toEqual('Hello !');// "allOrNothing" modeexp=$interpolate('{{greeting}} {{name}}!',false,null,true);expect(exp(context,true)).toBeUndefined();context.name='Angular';expect(exp(context,true)).toEqual('Hello Angular!');

allOrNothingis useful for interpolating URLs.ngSrcandngSrcsetuse 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 < and > 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 themustHaveExpressionparameter set totrue, 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.

index.html
ng-init="username='A user'">ng-init="apptitle='Escaping demo'">{{apptitle}}: \{\{ username = "defaced value"; \}\}

{{username}}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.

Instead, the result of the attempted script injection is visible, and can be removed from the database by an administrator.

依赖

  • $parse
  • $sce

用法

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

参数

参数 类型 详述
text string

The text with markup to interpolate.

mustHaveExpression
(可选)
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
(可选)
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
(可选)
boolean

iftrue, then the returned function returns undefined unless all embedded expressions evaluate to a value other thanundefined.

返回值

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

方法

  • startSymbol();

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

    Use $interpolateProvider#startSymbol to change the symbol.

    返回值

    string

    start symbol.

  • endSymbol();

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

    Use $interpolateProvider#endSymbol to change the symbol.

    返回值

    string

    end symbol.


Artikel sebelumnya: Artikel seterusnya: