caoruiy‘s blog

Wisdom outweighs any wealth

Angular-API-auto-service-$interpolate

将带有标记的字符串编译为插值函数。该服务由HTML $compile 服务用于数据绑定。请参阅 $interpolateProvider 来配置插值标记。

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

$interpolate 有一个可选的第四个参数, allOrNothing,如果 allOrNothingtrue,interpolate 函数的返回值是 undefined ,除非所有嵌入式表达式求值全不为 undefined

var $interpolate = ...; // 注入的服务
var context = {greeting: 'Hello', name: undefined };

// 默认是 "forgiving" 模式
var exp = $interpolate('{{greeting}} {{name}}!');
expect(exp(context)).toEqual('Hello !');

// "allOrNothing" 模式
exp = $interpolate('{{greeting}} {{name}}!', false, null, true);
expect(exp(context)).toBeUndefined();// 返回 undefined
context.name = 'AngularJS';
expect(exp(context)).toEqual('Hello AngularJS!');// 正常返回

allOrNothing 对于内插URL很有用。 ngSrcngSrcset 使用此行为。

逃逸插值

$interpolate 提供了转义内插标记的机制。可以使用REVERSE SOLIDUS U + 005C(反斜线)将其每个字符前面的开始和结束标记进行转义。它将呈现为一个常规的开始/结束标记,不会被解释为表达式或绑定。

这使得Web服务器能够在一定程度上防止脚本注入攻击和破坏攻击,同时还可以使代码示例在不依赖 ngNonBindable 指令的情况下工作。

为了安全起见,强烈建议Web服务器转义用户提供的数据,将尖括号(<,>)替换为 &lt;&gt; 并分别用其转义的对应物代替所有插补开始/结束标记。

$interpolate 服务处理文本时,转义的内插标记将仅替换为渲染输出中的实际插值标记。因此,对于由 $compile 内插的HTML元素,或者以将 mustHaveExpression 参数设置为 true 进行内插,插值文本必须包含未转义的内插表达式。因此,只有当用户数据用于从服务器呈现模板时,或者指令使用其他不受信任的数据时,这通常才有用。

 <p ng-init="apptitle='Escaping demo';username='A user'">{{apptitle}}: \{\{ username = "defaced value"; \}\}</p>

解析为:

Escaping demo: {{ username = "defaced value"; }}

已知问题

内插表达式当前不可能包含插值结束符号。例如,{{'}}'}} 将被错误地解释为{{'}} + '}},即由单引号''}} 字符串组成的内插表达式。

所有指令和组件必须在其模板中使用标准的{{}}插值符号。如果更改应用程序插入符号,$compile 服务将尝试将标准符号反归正到自定义符号。非规范化过程不够聪明,不能知道不替代标准符号的实例,而它们通常不会被视为插值符号。例如在下面的代码片段中,文字对象的关闭大括号将被错误地非规范化:

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

解决方法是确保这些实例由空格分隔:

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

Dependencies

  • $parse
  • $sce

Usage

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

  • text : 带标记的文本进行插值。
  • mustHaveExpression (optional) : 如果设置为true,则插值字符串必须具有嵌入表达式才能返回插值函数。没有嵌入表达式的字符串将返回空值为插值函数。
  • trustedContext (optional) : 当提供时,返回的函数在返回之前通过 $sce.getTrusted(interpolatedResult,trustedContext) 传递内插结果。有关详细信息,请参阅提供严格上下文转义的$sce服务。
  • allOrNothing (optional) : 如果为true,则返回的函数返回undefined,除非所有嵌入式表达式求值均不为 undefined

Returns

function(context) : 用于计算内插字符串的内插函数。该函数具有以下参数:
– context : 嵌入在插补文本中的所有表达式的评估上下文

Methods

startSymbol();

用于表示内插字符串中表达式开始的符号。默认为 {{

使用 $interpolateProvider.startSymbol 改变符号

Returns

string :start symbol.

endSymbol();

用于表示内插字符串中表达式的结尾的符号。默认为 }}

使用 $interpolateProvider.endSymbol 去改变符号

Returns

string :end symbol.

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注