要在字符串模板中做插值操作,需要在你的对象中注入$interpolate服务。在下面的例子
中,我们将会将它注入到一个控制器中:

angular.module('myApp', [])
.controller('MyController',
function($scope, $interpolate) {
// 我们同时拥有访问$scope和$interpolate服务的权限
});

$interpolate服务是一个可以接受三个参数的函数,其中第一个参数是必需的。
 text(字符串):一个包含字符插值标记的字符串。
 mustHaveExpression(布尔型):如果将这个参数设为true,当传入的字符串中不含有表
达式时会返回null。
 trustedContext(字符串):AngularJS会对已经进行过字符插值操作的字符串通过
$sec.getTrusted()方法进行严格的上下文转义。

$interpolate服务返回一个函数,用来在特定的上下文中运算表达式。
设置好这些参数后,就可以在控制器中进行字符插值的操作了。例如,假设我们希望可以在
电子邮件的正文中进行实时编辑,当文本发生变化时进行字符插值操作并将结果展示出来。

<div ng-controller="MyController">
<input ng-model="to"
type="email"
placeholder="Recipient" />
<textarea ng-model="emailBody"></textarea>
<pre>{{ previewText }}</pre>
</div>

由于控制器内部设置了一个需要每次变化都重新进行字符插值的自定义输入字段,因此需要
设置一个$watch来监听数据的变化。为了保证示例的完整性,在这
里我们为$watch引入完整的代码。
简而言之,$watch函数会监视$scope上的某个属性。只要属性发生变化就会调用
对应的函数。可以使用$watch函数在$scope上某个属性发生变化时直接运行一个自定
义函数。
在控制器中,我们设置了$watch来监视邮件正文的变化,并将emailBody属性的值进行字符
插值后的结果赋值给previewText属性。

angular.module('myApp', [])
.controller('MyController', function($scope, $interpolate) {
// 设置监听
$scope.$watch('emailBody', function(body) {
if (body) {
var template = $interpolate(body);
$scope.previewText =
template({to: $scope.to});
}
};
});

输出效果:

Angular表达式--插值字符串($interpolate)的更多相关文章

  1. angular 表达式与指令

    angular表达式的一些特点 属性表达式: 属性表达式是对应于当前作用域,Javascript对应的是全局window对象. AngularJS要使用window作用域的话得用$window来指向全 ...

  2. Angular 插值字符串

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. angularjs——插值字符串

    一.何为插值字符串? 其实插值字符串的意思就是:拥有字符插值标记的字符串.如: hello,{{ to }}....字符插值标记:相当于我们平时在字符串替换中使用到的占位符.上面的例子中的{{to}} ...

  4. angularjs字符串插值($interpolate)

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...

  5. AngularJS 插值字符串 $interpolate

    定义: $interpolate:编译一段带有嵌入标记的语句,然后返回一个interpolate(插值)函数.使用: $interpolate(text,[mustHaveException],[tr ...

  6. EL表达式拼接字符串

    EL表达式拼接字符串<c:set var="types" value="${','}${resMap['vo'].lineType }${','}" &g ...

  7. el表达式判断字符串相等

    el表达式判断字符串相等 Java code 1 ${"a" == "a"}  ${"b" eq "b"}  都可以 & ...

  8. Java基础 switch 表达式为字符串

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  9. angular入门--绑定字符串

    要使用angularjs,首先得下载并且在页面中调用它 先上源码 <html ng-app="app1"> <head> <meta name=&qu ...

随机推荐

  1. Java 之 Servlet

    JavaWeb 三大组件: Servlet, Filter, Listener. Servlet 的作用是处理请求,服务器会把接收到的请求交给 Servlet 来处理.在 Servlet 中通常需要: ...

  2. sklearn.svm包中的SVC(kernel=”linear“)和LinearSVC的区别

    参考:https://stackoverflow.com/questions/45384185/what-is-the-difference-between-linearsvc-and-svckern ...

  3. 6.Insert Documents-官方文档摘录

    总结 1.插入单文档 db.inventory.insertOne( { item: "canvas", qty: , tags: , w: 35.5, uom: "cm ...

  4. django博客项目1.环境搭建

    安装 Python Windows 下安装 Python 非常简单,去 Python 官方网站找到 Python 3 的下载地址,根据你的系统选择 32 位或者 64 位的安装包,下载好后双击安装即可 ...

  5. 斯坦福大学Andrew Ng - 机器学习笔记(8) -- 推荐系统 & 大规模机器学习 & 图片文字识别

    大概用了一个月,Andrew Ng老师的机器学习视频断断续续看完了,以下是个人学习笔记,入门级别,权当总结.笔记难免有遗漏和误解,欢迎讨论. 鸣谢:中国海洋大学黄海广博士提供课程视频和个人笔记,在此深 ...

  6. flask实现获取表单并执行shell

    1.一个HTML form input和一个button提供给用户输入 2.使用flask的request获取用户输入的文件名 3.判断输入异常 4.执行shell命令touch aa.txt 并返回 ...

  7. Spring 数据库连接池读取系统环境变量作为参数

    原来是写在一个properties文件里面,后来项目要部署的的确太多了,每次更改不太方便,就想把这些固定不变的信息写在当地的环境变量里面 原先是这样的:引用的所有信息在jdbc.properties ...

  8. Vincent

    歌手Don McClean的Starry Starry Night,也有很多人叫这首歌为<Vincent> 编前:金色的向日葵.燃烧般的丝柏.风吹过的麦田.旋涡状的星体……,一幅幅狂嚣般的 ...

  9. Delphi 正则表达式语法(6): 贪婪匹配与非贪婪匹配

    Delphi 正则表达式语法(6): 贪婪匹配与非贪婪匹配 //贪婪匹配 var   reg: TPerlRegEx; begin   reg := TPerlRegEx.Create(nil);   ...

  10. 学会这些你就是Android 开发高手了!

    世界范围内,很多移动设备都是Android系统,Android开发可以说很有前景.对于安卓开发者来说,如果有个地方可以找到Android开发所有的资料,不需要一个网站一个网站的搜索,简直是件很开心的事 ...