一、何为插值字符串?

其实插值字符串的意思就是:拥有字符插值标记的字符串。
如: hello,{{ to }}....
字符插值标记:相当于我们平时在字符串替换中使用到的占位符。
上面的例子中的{{to}}其实就是类似于一个占位符,我们可以通过$interpolate服务将上面的例子中的字符串进行处理,返回一个模板对象,由于$interpolate服务默认是将{{}}分别当做是占位符的前缀和后缀,所以,上面的例子中的{{to}}将会被当做一个占位符,并且把to当做该占位符的命名,可以给模板对象传入一个对象如:{to:'xxxx'},直接替换掉{{to}}占位符。

二、来个栗子!

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
<input ng-model="to"
type="email"
placeholder="Recipient" />
<textarea ng-model="emailBody"></textarea>
<pre>{{ previewText }}</pre>
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
</div>
</body>
</html>
angular.module('myApp',[])
.controller('MyController',function($scope,$interpolate){
$scope.emailBody = "hello,{{to}}";
$scope.to = 'ari@fullstack.io';
var template = $interpolate($scope.emailBody);
$scope.$watch('to',function(to){
console.log(to);
$scope.previewText = template({'to':$scope.to});
});
});

代码片段:JS Bin on jsbin.com


三、$interpolate服务

$interpolate服务是一个可以接受三个参数的函数,其中第一个参数是必需的。

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

$interpolate服务返回一个函数,用来在特定的上下文中运算表达式。

四、如何改变占位符的前、后缀?

上面的第一点就讲到了$interpolate默认的占位符是以{{}}为前后缀的。
那这个占位符的前后缀能否改成我们自己想要的样子呢?
答案是肯定的,当然可以改~~
我们只需要在$interpolateProvider服务进行配置。

$interpolateProvider.startSymbol('__');
$interpolateProvider.endSymbol('__');

注意:使用$interpolateProvider进行设置这个占位符的前后缀的时候,需要注意你的上下文,如果你是直接在某个模块下进行配置,那么该模块的angularjs数据绑定对象的{{xxx}}格式也会被影响。
如:

angular.module('myApp',[])
.config(['$interpolateProvider',function($interpolateProvider){
$interpolateProvider.startSymbol('__');
$interpolateProvider.endSymbol('__');
}])
.controller('MyController',function($scope,$interpolate){
$scope.emailBody = "hello,__to__";
$scope.to = 'ari@fullstack.io';
$scope.previewText ="";
var template = $interpolate($scope.emailBody);
$scope.$watch('to',function(to){
console.log(to);
$scope.previewText = template({'to':$scope.to});
console.log($scope.previewText);
});
});

那么html页面中{{previewText}}就也要改成__previewText__的格式.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
<input ng-model="to"
type="email"
placeholder="Recipient" />
<br/>
<textarea ng-model="emailBody"></textarea>
<br/>
<pre>__previewText__</pre>
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
</div>
</body>
</html>

所以,一般情况下$interpolateProvide用在自己创建的服务上面,这样就可以把上下文环境进行隔离。

代码片段:JS Bin on jsbin.com

angularjs——插值字符串的更多相关文章

  1. AngularJS 插值字符串 $interpolate

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

  2. Angular表达式--插值字符串($interpolate)

    要在字符串模板中做插值操作,需要在你的对象中注入$interpolate服务.在下面的例子中,我们将会将它注入到一个控制器中: angular.module('myApp', []) .control ...

  3. angularJs,ionic字符串操作

    1.首先我们需要把一段"文本或字符串"中的我们想进行操作的"字符串","字"筛选出来,代码如下: app.filter('replaceCo ...

  4. angularJs中将字符串转换为HTML格式

    首先定义一个filter: .filter( 'to_trusted', ['$sce', function ($sce) { return function (text) { return $sce ...

  5. AngularJS 截取字符串

    参考文章:https://blog.csdn.net/u010234516/article/details/54631525 //过滤器 app.filter('textLengthSet', fun ...

  6. Angular 插值字符串

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

  7. Groovy--使用模板引擎和GroovyShell执行插值字符串

    package curveJudge import groovy.text.SimpleTemplateEngine /** * Created by Jxy on 2019/8/26 17:16 * ...

  8. Swift字符串插值

    字符串插值是一种全新的构建字符串的方式,可以在其中包含常量.变量.字面量和表达式.您插入的字符串字面量的每一项都被包裹在以反斜线为前缀的圆括号中: let multiplier = let messa ...

  9. angularjs杂谈

    1.MVVM的看法:我给view里面各种控件也定义一个对应的数据对象,这样,只要修改这个数据对象,view里面显示的内容就自动跟着刷新,而在view里做了任何操作,这个数据对象也跟着自动更新. Vie ...

随机推荐

  1. 《BI那点儿事》Microsoft 线性回归算法

    Microsoft 线性回归算法是 Microsoft 决策树算法的一种变体,有助于计算依赖变量和独立变量之间的线性关系,然后使用该关系进行预测.该关系采用的表示形式是最能代表数据序列的线的公式.例如 ...

  2. Ext1.X的CheckboxSelectionModel默认全选之后不允许编辑的BUG解决方案

    Ext1.X的CheckboxSelectionModel默认全选之后不允许编辑的BUG解决方案,ext 的CheckboxSelectionModel在后台默认选中之后,前台就不允许编辑的bug是存 ...

  3. Advice for students of machine learning--转

    原文地址:http://www.mimno.org/articles/ml-learn/ written by david mimno One of my students recently aske ...

  4. Android 软件开发之如何使用Eclipse Debug调试程序详解及Eclipse常用快捷键(转)

    1.在程序中添加一个断点如果所示:在Eclipse中添加了一个程序断点 在Eclipse中一共有三种添加断点的方法 第一种: 在红框区域右键出现菜单后点击第一项 Toggle Breakpoint 将 ...

  5. C++程序设计之四书五经[转自2004程序员杂志]--下篇

    C++程序设计之四书五经(下篇) 作者:荣耀 我在上篇中“盘点”了TCPL和D&E以及入门教程.高效和健壮编程.模板和泛型编程等方面共十几本C++好书.冬去春来,让我们继续C++书籍精彩之旅. ...

  6. Bootstrap+angularjs+MVC3+分页技术+角色权限验证系统

    1.Bootstrap使用教程 相关教程: http://www.bootcss.com/components.html 页面使用代码: <script src="@Url.Conte ...

  7. linux如何编译安装新内核支持NTFS文件系统?(以redhat7.2x64为例)

    内核,是一个操作系统的核心.它负责管理系统的进程.内存.设备驱动程序.文件和网络系统,决定着系统的性能和稳定性.Linux作为一个自由软件,在广大爱好者的支持下,内核版本不断更新.新的内核修订了旧内核 ...

  8. mysql基于init-connect+binlog完成审计功能

    目前社区版本的mysql的审计功能还是比较弱的,基于插件的审计目前存在于Mysql的企业版.Percona和MariaDB上,但是mysql社区版本有提供init-connect选项,基于此我们可以用 ...

  9. 开源通信(C#)__

    GitHub中的README文件,使用markdown格式的文件. 下面简单介绍下相关语法: 大标题: =================================== 大标题一般显示工程名,你 ...

  10. [Asp.net 5] Localization-简单易用的本地化-全球化信息

    本篇比较简单介绍Localization解决方案中: Microsoft.Framework.Globalization.CultureInfoCache 工程 CultureInfoGenerato ...