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 ...
随机推荐
- 常用的SQLAlchemy列选项
常用的SQLAlchemy列选项 https://blog.csdn.net/weixin_41896508/article/details/80772238 选项名 说明 primary_key 如 ...
- 服务器1M带宽同时能承受多少人在线
最近网站的流量一直在增长,这个肯定是好事.不过也有个麻烦的问题,目前本站用的的虚拟空间,每月流量30G,虽然95%的图片都已外链,但流量还是很吃紧,日均2000ip,4月份流量34g左右,单JS的响应 ...
- Java 语言基础之数组应用
什么时候使用数组呢? 如果数据出现了对应关系, 而且对应关系的一方是有序的数字编号, 并作为角标使用. 这时,就必须要想到数组的使用. 也就是将这些数据存储到数组中, 根据运算的结果作为角标, 直接去 ...
- 《深入理解Linux网络技术内幕》阅读笔记 --- 路由查找
概述 1.不论是入口还是出口流量,都是利用fib_lookup来查找路由表,fib_lookup是对每一个路由表所提供的查找函数的包裹函数,当不支持策略路由时,查找函数版本针对的是local表和mai ...
- An operation on a socket could not be performed because the system lacked sufficient buffer space or because a queue was full.
与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误.未找到或无法访问服务器.请验证实例名称是否正确并且 SQL Server 已配置为允许远程连接. (provider: TCP ...
- java 多线程 day04 线程通信
package com.czbk.thread; /** * Created by chengtao on 17/12/3. * 需求: 子线程先运行10次,然后主线程运行 100次,依次运行50次 ...
- MariaDB日志
1.查询日志:一般来说不开开启(会产生额外压力,并且不一定有价值),query log 记录查询操作:可以记录到文件(file)中也可记录到表(table)中 general_log=ON|OFF g ...
- python之路 面向对象基础 XML
一.面向对象基础 1.类(Class): 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例. 类变量:类变量在整个实例化的对象中是公用的.类变量定义 ...
- Loopback接口的作用
Loopback接口是虚拟接口,是一种纯软件性质的虚拟接口.任何送到该接口的网络数据报文都会被认为是送往设备自身的.大多数平台都支持使用这种接口来模拟真正的接口.这样做的好处是虚拟接口不会像物理接口那 ...
- UILable 的 属性设置
//UILable的大小自适应实例 UILabel *myLable = [[UILabel alloc] initWithFrame:CGRectMake(, , , )];//设定位置与大小 [m ...