官方关于$interpolate的API
$interpolate
编译一段带有嵌入标记的语句,然后返回一个interpolation(插值)函数,
这个服务也被HTML$compile服务用来进行数据绑定。可以用$interpolateProvider来配置嵌入的标记。依赖
$parse
$sce
使用
$interpolate(text, [mustHaveExpression], [trustedContext], [allOrNothing])
参数
text[string]
需要被编译的字符串mustHaveExpression[boolean]
如果这个参数的值被设置为true
,那么上面的text
中必须含有嵌入其中的表达式,不然将会返回null
,而不是我们预期的interpolation function
trustedContext[string]
如果提供了这个参数值,那么在返回相应的函数之前,将会使用$sce.getTrusted(interpolatedResult, trustedContext)
对返回的结果做处理。allOrNothing[boolean]
如果这个参数的值被设置为true
,那么只有text
中所有嵌入的表达式没有一个被转换为undefined
的时候才会返回我们期望的函数。
返回值
function(context)
一个用来计算带有插值标记语句的函数,这个函数有一个参数context
为嵌入标记语句中的表达式提供的上下文。
Escaped Interpolation(摆脱插值服务)
$interpolate
提供了一种用来摆脱插值标记的机制,那就是通过在嵌入标记的开始和结束符号前面加上反斜杠\
,AngularJS将会把这部分渲染为普通的部分,所以也不会被解读为为表达式或者数据绑定。这让Web服务器阻止脚本注入和抵御网络攻击成为可能,从某种程度上说,无需依靠
ngNonBindable
指令就可以展示代码例子是如何运行的。为了安全目的,我们强烈建议Web服务器对用户的应用数据进行检索和过滤,用
<
和>
替代(<,>),并且使用相应的字符去替代嵌入标记的开始和结束符。
如果你觉得笔者翻译的不是很好,可以到官网看看他们的英文文档
下面我们来探究一下$interpolate
的使用方法
注:代码是在jsfiddle上面写的,所以大家实践的时候要注意引入相应的文件
T1:在这个例子中我们先来简单地使用一下$interpolate
(html)
<div ng-app="MyApp">
<div ng-controller="MyController">
<input ng-model="myName" type="text" placeholder="Type Your Name">
<textarea ng-model="myTextarea" cols="30" rows="10"></textarea>
<div ng-bind="interpolatedValue"></div>
</div>
</div>
(js)
angular.module("MyApp", [])
.controller("MyController", function($scope, $interpolate){
$scope.$watch("myTextarea", function(newVal, oldVal, scope){
var interpolatedFunc = $interpolate(newVal);
//(1)
$scope.interpolatedValue = interpolatedFunc({myName: $scope.myName});
//(2)
//$scope.interpolatedValue = interpolatedFunc(scope);
});
});
关于上面代码的解释:
因为要实时监测
myTextarea
的变化,所以我们要使用$watch方法去对其进行实时监测。代码(1)与代码(2)的作用是一样的,括号中的参数是插值标记字符串中表达式转义(解析)的上下文。
我们在
textarea
中输入{{myName}}
会在下面的div
中显示input
输入框的内容。
T2:在下面这个例子中我们尝试去使用$interpolateProvider
只需修改上面的js代码如下所示:
angular.module("MyApp", [])
.config(['$interpolateProvider', function ($interpolateProvider) {
$interpolateProvider.startSymbol('$');
$interpolateProvider.endSymbol('$');
}])
.controller("MyController", function($scope, $interpolate){
$scope.$watch("myTextarea", function(newVal, oldVal, scope){
var interpolatedFunc = $interpolate(newVal);
$scope.interpolatedValue = interpolatedFunc({myName: $scope.myName});
//$scope.interpolatedValue = interpolatedFunc(scope);
});
});
上面的代码修改了嵌入标记,让嵌入标记的开始和结束符都变成了$
,然后我们也就可以在textarea
中输入$myName$
会在下面的div
中显示input
输入框的内容。
笔者水平有限,如果哪里有说的不对的地方,还望提出,大家一起进步