<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
<meta charset="utf-8">
<title>字符串插值</title>
<link rel="stylesheet" href="../bootstrap.min.js">
</head>
<body ng-controller="myController">
To: <input type="text" ng-model="to" placeholder="输入联系人">
<br>
email:
<br>
<textarea ng-model="emailBody"></textarea>
<br>
<!-- 第二个例子这里需要修改为 ‘_ _’这个符号 -->
预览: <pre>_previewText_</pre>
<script src="../angular.min.js"></script>
<script>
// 字符串插值 这里演示将$interpolate封装为services的用法       
// angular.module('app', [])
// .controller('myController', function($scope, $interpolate) { // 直接使用$interpolate的演示
// $scope.$watch('emailBody', function(body) {
// console.log(body)
// if(body) {
// var template = $interpolate(body);
// $scope.previewText = template({ to: $scope.to });
// }
// })
// }) // 修改标识表达式的符号{{ }}为_ _ , 查看这个例子 需要将html中的{{ }} 改为_ _
angular.module('app', [])
.config(['$interpolateProvider',
function($interpolateProvider) {
$interpolateProvider.startSymbol('_');
$interpolateProvider.endSymbol('_');
}
])
.factory('EmailParser', ['$interpolate',
function($interpolate) { // 也可以将 $interpolate 封装成为一个services
return {
parse: function(text, contact) {
var template = $interpolate(text);
return template(contact);
}
}
}
])
.controller('myController', ['$scope', 'EmailParser',
function($scope, EmailParser) {
$scope.$watch('emailBody', function(body) {
if(body) {
$scope.previewText = EmailParser.parse(body, {
to: $scope.to
})
}
})
}
])
</script>
</body>
</html>

angularjs字符串插值($interpolate)的更多相关文章

  1. AngularJS 字符串

    AngularJS字符串就像是JavaScript字符串 <!DOCTYPE html><html><head><meta http-equiv=" ...

  2. Swift字符串插值

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

  3. Scala字符串插值

    Scala提供了三种字符串插值方式:s,f和raw.1. s字符串插值器简单的说就是解析字符串变量. val name = "Tom" println(s"His nam ...

  4. [转] Scala 2.10.0 新特性之字符串插值

    [From]  https://unmi.cc/scala-2-10-0-feature-string-interpolation/ Scala 2.10.0 新特性之字符串插值 2013-01-20 ...

  5. CoffeeScript里的字符串插值

    拼接字符串是我们常干的事情.与其用很多的 "" + "",不如用一下字符串插值,可读性好些. 方法是在字符串中加入#{ 变量.表达式.函数等} getOther ...

  6. React技巧之字符串插值

    原文链接:https://bobbyhadz.com/blog/react-string-interpolation 作者:Borislav Hadzhiev 正文从这开始~ 总览 在React中,使 ...

  7. AngularJS 简介、指令、表达式

    AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HT ...

  8. AngularJS安装配置与基础概要整理(上)

    以前整理的,可供参考. 安装: 1.首先要安装node.js和它的npm包管理系统.(nodejs相关待整理) 2.安装grunt .grunt是一个基于任务的Javascript工程命令行构建工具. ...

  9. AngularJS快速入门指南03:表达式

    AngularJS通过表达式将数据绑定到HTML. AngularJS表达式 AngularJS表达式写在双大括号中:{{ 表达式语句 }}. AngularJS表达式绑定数据到HTML的方式与ng- ...

随机推荐

  1. url编码方法(暂时知道是什么

    var a="https://i.cnblogs.com/EditPosts.aspx?opt=1" encodeURI(a); encodeURIComponent(); dec ...

  2. 读书笔记_Effective_C++_条款二十一:当必须返回对象时,别妄想返回其reference

    在栈空间的临时成员变量在函数生命期结束后无法传出 friend A& operator*(const A& a, const A& b) { A temp; temp.data ...

  3. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  4. Eclipse快捷键集结

    Debug快捷键 F5单步调试进入函数内部.   F6单步调试不进入函数内部,如果装了金山词霸2006则要把“取词开关”的快捷键改成其他的.   F7由函数内部返回到调用处.   F8一直执行到下一个 ...

  5. Unity 3D中的界面快捷键

    Ctrl+1 切换到Scene视图Ctrl+2 切换到Game视图Ctrl+3 切换到Inspector视图Ctrl+4 切换到Hierarchy视图Ctrl+5 切换到Project视图Ctrl+6 ...

  6. Altium Designer (protel) 各版本“故障”随谈

    Altium 的版本很多,每个版本都或多或少有些可容忍或可不容忍的问题,此贴只是希望各位能将遇到的问题写出来,只是希望 给还在使用 altium 的网友一些参考,也希望有些能被 altium 所接受@ ...

  7. Teach Yourself Scheme in Fixnum Days 13 Jump跳转

    Jumps One of the signal features of Scheme is its support for jumps or nonlocal control. Specificall ...

  8. Linux下查看文件夹或目录大小

    当磁盘大小超过标准时会有报警提示,这时如果掌握df和du命令是非常明智的选择. df可以查看一级文件夹大小.使用比例.档案系统及其挂入点,但对文件却无能为力.    du可以查看文件及文件夹的大小.d ...

  9. java实现二维码

    说起二维码,微信好像最先启用,随后各类二维码就开始流行起来了.那什么是二维码呢. 1.什么是二维码?百度一下即可 http://baike.baidu.com/view/132241.htm?fr=a ...

  10. redis maxmemory设置

    关于maxmemory的设置,如果redis的应用场景是作为db使用,那不要设置这个选项,因为db是不能容忍丢失数据的. 如果作为cache使用,则可以启用这个选项(其实既然有淘汰策略,那就是cach ...