代码下载：https://files.cnblogs.com/files/xiandedanteng/angularjsAttenSpan.rar

AngularJS中，<span class="bluetext" ng-bind="ctrl.user.name|uppercase"></span>和{{ctrl.user.name|uppercase}}是等价的，但不等于<span class="bluetext" ng-bind="ctrl.user.name|uppercase"/>，这样写会让/>后面的文字失效，如下图：

页面代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="notesApp">
 <head>
  <title> New Document </title>
  <style>
    .bluetext{
        color:lightblue;
    }
  </style>
    <meta charset="gbk">
    <script src="angular1.4.6.min.js"></script>
 </head>

 <body ng-controller="MainCtrl as ctrl">
    <p>Hi,I am <span class="bluetext" ng-bind="ctrl.user.name|uppercase"></span> from China</p>
    <p>Hi,I am <span class="bluetext" ng-bind="ctrl.user.name|uppercase"/> from China</p>
    <p>Hi,I am <span class="bluetext">{{ctrl.user.name|uppercase}}</span> from China</p>
 </body>
</html>
<script type="text/javascript">
<!--
    angular.module('notesApp',[])
     .controller('MainCtrl',[function(){
       var self=this;

       self.user={name:"Andy Liu"};
     }]);
//-->
</script>

AngularJS中，<span class="bluetext" ng-bind="ctrl.user.name|uppercase"></span>和{{ctrl.user.name|uppercase}}是等价的，但不等于<span class="bluetext" ng-bind="ctrl.user.name|uppercase"/>的更多相关文章

  1. AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5

    前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...

  2. 深入学习AngularJS中数据的双向绑定机制

    来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...

  3. AngularJS中的指令全面解析（转载）

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  4. angularJS中directive与controller之间的通信

    当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...

  5. 详解AngularJS中的filter过滤器用法

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...

  6. AngularJS中使用的表单验证

    Reference: http://www.tuicool.com/articles/2Qbiqi 客户端表单验证是AngularJS里面最酷的功能之一. AngularJS表单验证可以让你从一开始就 ...

  7. 彻底弄懂AngularJS中的transclusion

    点击查看AngularJS系列目录 彻底弄懂AngularJS中的transclusion AngularJS中指令的重要性是不言而喻的,指令让我们可以创建自己的HTML标记,它将自定义元素变成了一个 ...

  8. 浅谈AngularJS中的指令和指令间的相互通信

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  9. (译) 在AngularJS中使用的表单验证功能【转】

    验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...

随机推荐

  1. linux下telnet安装与使用

    现在管理linux基本都用crt.xshell或者putty,已经没什么人用telnet,因为后续需要讲zabbix免客户端监控只telnet,通过telnet来监控服务器性能. yum安装telne ...

  2. LAMP第三部分php配置和mysql配置

    9. 配置防盗链http://www.lishiming.net/thread-71-1-1.html 防止别人的网站,放你网站图片的链接, 位置一般情况下在 /usr/local/apache/co ...

  3. Java实现简单的socket通信

    今天学习了一下java如何实现socket通信,感觉难点反而是在io上,因为java对socket封装已经很完善了. 今天代码花了整个晚上调试,主要原因是io的flush问题和命令行下如何运行具有pa ...

  4. 勒索病毒 -- “永恒之蓝”NSA 武器免疫工具

    “永恒之蓝”NSA 武器免疫工具 针对 445 端口:445端口是一个毁誉参半的端口,他和139端口一起是IPC$入侵的主要通道.有了它我们可以在局域网中轻松访问各种共享文件夹或共享打印机,但也正是因 ...

  5. EasyUI中combogrid设置onSelect后 获取不到getSelecte问题解决

    $('#person').combogrid({ onSelect: function(index, item){ $('#dataForm').form('load', item); $(" ...

  6. C/C++学习路线

    随着互联网及互联网+深入蓬勃的发展,经过40余年的时间洗礼,C/C++俨然已成为一门贵族语言,出色的性能使之成为高级语言中的性能王者.而在今天,它又扮演着什么样重要的角色呢?请往下看: 后端服务器,移 ...

  7. JDBC连接池&DBUtils使用

    使用连接池改造JDBC的工具类: 1.1.1          需求: 传统JDBC的操作,对连接的对象销毁不是特别好.每次创建和销毁连接都是需要花费时间.可以使用连接池优化的程序. * 在程序开始的 ...

  8. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---6

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下: <Linux命令行与shell脚本 ...

  9. Android 中利用ViewFlipper 滑动屏幕切换页面，ListView展示数据

    首先新建一个Android项目,命名为ViewFlipperTest 如图:项目机构,本项目主要操作图中红色箭头标注的文件 1.HgroupAdapter.java文件代码↓主要实现listview数 ...

  10. 设置自定义Dialog背景不变暗

    设置Dialog弹窗的背景不变暗,有两种方式,一种是通过在style中设置,一种是通过代码设置. 一.在style中设置 <style name="dialog_waiting&quo ...