Angular表达式--插值字符串($interpolate)
要在字符串模板中做插值操作,需要在你的对象中注入$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)的更多相关文章
- angular 表达式与指令
angular表达式的一些特点 属性表达式: 属性表达式是对应于当前作用域,Javascript对应的是全局window对象. AngularJS要使用window作用域的话得用$window来指向全 ...
- Angular 插值字符串
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- angularjs——插值字符串
一.何为插值字符串? 其实插值字符串的意思就是:拥有字符插值标记的字符串.如: hello,{{ to }}....字符插值标记:相当于我们平时在字符串替换中使用到的占位符.上面的例子中的{{to}} ...
- angularjs字符串插值($interpolate)
<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...
- AngularJS 插值字符串 $interpolate
定义: $interpolate:编译一段带有嵌入标记的语句,然后返回一个interpolate(插值)函数.使用: $interpolate(text,[mustHaveException],[tr ...
- EL表达式拼接字符串
EL表达式拼接字符串<c:set var="types" value="${','}${resMap['vo'].lineType }${','}" &g ...
- el表达式判断字符串相等
el表达式判断字符串相等 Java code 1 ${"a" == "a"} ${"b" eq "b"} 都可以 & ...
- Java基础 switch 表达式为字符串
JDK :OpenJDK-11 OS :CentOS 7.6.1810 IDE :Eclipse 2019‑03 typesetting :Markdown code ...
- angular入门--绑定字符串
要使用angularjs,首先得下载并且在页面中调用它 先上源码 <html ng-app="app1"> <head> <meta name=&qu ...
随机推荐
- Sum---poj1844(数学题)
题目链接:http://poj.org/problem?id=1844 题意:给一个整数n,求当n由1到k的连续整数加或减组成时的最小的k. 如果n全部由加法组成,那么k可以组成k(k+1)/2,设减 ...
- SQL 时间函数 Datepart()与DateName()
1.Datepart() 返回代表指定日期的指定日期部分的整数 语法 Datepart(datepart,date) 返回类型 int datepart: 日期部分 缩写 year yy, yyyy ...
- 目标检测之R-FCN
R-FCN:Object Detection via Region-based Fully Convolutional Networks R-FCN的网络结构 一个Base的convolutional ...
- redhat 9.0安装完不能上网解决办法(补) - 并附上redhat9.0 下载链接
昨天一位网友Q我,说我的开发环境搭建教程按步骤最后上不了网怎么解决我才突然想起9.0版本在VM7,8中存在问题,于是今天我就简单说下解决的方法. 由于本人习惯使用redhat 9.0版本所以到现在还是 ...
- 错误:未启用当前数据库的SQL Server Service Broker,因此查询通知不受支持。如果希望使用通知,请为此数据库启用 Service Broker。
解决方法: 打开SQL Server,新建查询: ALTER DATABASE 数据库名 SET NEW_BROKER WITH ROLLBACK IMMEDIATE;ALTER DATABASE 数 ...
- Python 中的条件运算符
一.概述 在 C.Java 等语言中,有一种常见的条件运算符,又叫"三目运算符". 详情参见 [条件运算符-wikipedia][https://zh.wikipedia.org/ ...
- kali 源设置sources.list
由于阿里源有些问题,可能我设置的问题,所以就去掉了,163的很快 # deb cdrom:[Debian GNU/Linux 2016.1 _Kali-rolling_ - Official Snap ...
- 20145201《Java程序设计》第十周学习总结
教材学习内容总结 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据. 程序员所作的事情就是把数据发送到指定的位置,或者接收到指定的数据,这个就是狭义的网络编程范畴. 在发送和接收 ...
- Docker高级使用
Docker卸载应用程序 先删除容器,在删除镜像 查询容器 docker ps –a 使用容器id删除容器 docker rm 18e672ecd8ed 查询镜像 docker images 使用镜像 ...
- 高并发情况下分布式全局ID
1.高并发情况下,生成分布式全局id策略2.利用全球唯一UUID生成订单号优缺点3.基于数据库自增或者序列生成订单号4.数据库集群如何考虑数据库自增唯一性5.基于Redis生成生成全局id策略6.Tw ...