<!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. 高放的c++学习笔记之lambda表达式

    lambda表达式:可以让代码看起来更整洁,有些结构简单且用的次数少的函数可以用lambda表达式替代, 通常结构是这样的[捕获列表](参数列表){函数部分} 捕获列表: lambda表达式如果在一个 ...

  2. POJ 1930 Dead Fraction

    POJ 1930 Dead Rraction 此题是一个将无限循环小数转化为分数的题目 对于一个数 x=0.abcdefdef.... 假设其不循环部分的长度为m(如abc的长度为m),循环节的长度为 ...

  3. html+css布局小练习w3cfuns

    虽然花了很长时间,但是也知道了不少,这次也不像以前了,不知道怎么下手,虽然是照着图片做,不过也做出来了图片来自w3cfuns:网站图片url  看了w3cfuns的两天驾驭DIV+CSS 这个网站对新 ...

  4. jquery easyui+layer后台框架

    最近使用jquery easyui搭建了一个后台框架,以方便以后使用 上图先: 下载地址:CSDN下载

  5. 在Ajax中将数组转换成字符串(0517-am)

    一.如何在Ajax中将数组转换成字符串 1. 主页面; <head> <meta http-equiv="Content-Type" content=" ...

  6. MYSQL常见出错mysql_errno()代码解析

    如题,今天遇到怎么一个问题, 在理论上代码是不会有问题的,但是还是报了如上的错误,把sql打印出來放到DB中却可以正常执行.真是郁闷,在百度里面 渡 了很久没有相关的解释,到时找到几个没有人回复的 & ...

  7. E​F​I​主​板​和​G​P​T​分​区​表​安​装​系​统以及转换GPT分区表的方法

    现在硬盘越来越大,而原来的MBR分区方式,超过2T的硬盘就会识别不全,只有使用GPT的方式才可以,但是GPT如果用原来的BIOS是无法引导装系统了,不过如果你的主板支持EFI,那么可以用GPT+EFI ...

  8. directive 指令

    参考文章 : http://www.zouyesheng.com/angular.html#toc20    18. 自定义指令directive http://blog.jobbole.com/62 ...

  9. cf C. Secrets

    http://codeforces.com/contest/334/problem/C #include <cstdio> #include <iostream> #inclu ...

  10. 【操作系统】进程间通信（C#）

    原文:[操作系统]进程间通信(C#) 08年9月入学,12年7月毕业,结束了我在软件学院愉快丰富的大学生活.此系列是对四年专业课程学习的回顾,索引参见:http://blog.csdn.net/xia ...