angular的$interpolate服务

转载 2015年11月21日 15:44:17

转自:(http://segmentfault.com/a/1190000002753321)
$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的使用方法
T1:
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输入框的内容。

Angualrjs插值字符串$interpolate

在AngularJS中,我们的确有手动运行模板编译的能力。例如,插值允许基于作用域上的某个条件实时更新文本字符串。         要在字符串模板中做插值操作,需要在你的对象中注入$interpola...
  • CSDN_lihe
  • CSDN_lihe
  • 2015年11月14日 11:10
  • 2854

angular学习(九)—— Interpolation

转载请写明来源地址:http://blog.csdn.net/lastsweetop/article/details/54864234插补和数据绑定在angular中,嵌入式表达式插补标记被用于数据绑...
  • lastsweetop
  • lastsweetop
  • 2017年02月04日 16:55
  • 1678

AngularJS 源码分析1

AngularJS简介 angularjs 是google出品的一款MVVM前端框架,包含一个精简的类jquery库,创新的开发了以指令的方式来组件化前端开发,可以去它的官网看看,请戳这里 再贴上...
  • u013510614
  • u013510614
  • 2016年02月20日 10:16
  • 711

angularjs中的$interpolate服务

$interpolate服务返回一个函数,用来在特定的上下文中运算表达式。 示例: html代码: {{previewText}} js代码: angular.modu...
  • u013742084
  • u013742084
  • 2016年09月17日 10:13
  • 706

《AngularJs》$interpolate插值字符串

Document
  • HERGhost
  • HERGhost
  • 2016年10月29日 18:33
  • 610

angular源码分析

AngularJS 源码分析1 AngularJS简介 angularjs 是google出品的一款MVVM前端框架,包含一个精简的类jquery库,创新的开发了以指令的方...
  • Generon
  • Generon
  • 2017年05月23日 11:01
  • 549

angularjs插值字符串

在AngularJS中,我们的确有手动运行模板编译的能力。例如,插值允许基于作用域上的某 个条件实时更新文本字符串。 要在字符串模板中做插值操作,需要在你的对象中注入$interpolate服务...
  • qq_29678299
  • qq_29678299
  • 2016年04月10日 00:15
  • 961

高效利用Angular中内置服务

AngularJS中为我们提供了众多的内置服务,通过这些内置服务可以轻松的实现一些常用功能。下面对Angular中常用的内置服务进行一下总结。 1.$location服务 $location服务用...
  • fareise
  • fareise
  • 2016年03月22日 16:55
  • 2258

AngularJs几种服务区别

AngularJs几种服务区别
  • DeepLies
  • DeepLies
  • 2016年09月10日 10:28
  • 1788

angular五种服务详解

在这之前angular学习笔记(十五)-module里的"服务"这篇文章里,已经大致讲解了ng中的"服务",在之后的很多地方也用到了服务,但是,所有的服务都是使用app.factory来创建的.但其实...
  • qq_33587050
  • qq_33587050
  • 2016年08月06日 19:36
  • 3509
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:angular的$interpolate服务
举报原因:
原因补充:

(最多只允许输入30个字)