浅谈AngularJS的$interpolate服务 1

官方关于$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服务器对用户的应用数据进行检索和过滤，用&lt和&gt替代(<,>)，而且使用相应的字符去替代嵌入标记的开始和结束符。

---

若是你以为笔者翻译的不是很好，能够到官网看看他们的英文文档

---

下面咱们来探究一下$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输入框的内容。

T1:jsfiddle代码在这里

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输入框的内容。

T2:jsfiddle代码在这里

笔者水平有限，若是哪里有说的不对的地方，还望提出，你们一块儿进步