代码下载：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. 第13届景驰-埃森哲杯广东工业大学ACM程序设计大赛

    拖了好久了 链接:https://www.nowcoder.com/acm/contest/90/A来源:牛客网 跳台阶 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K, ...

  2. koa2 + webpack 热更新

    网上有很多express+webpack的热更新,但是koa2的很少,这两天研究了一下子,写一个简单的教程. 1.需要的包 webpack:用于构建项目 webpack-dev-middleware: ...

  3. 【bzoj4896】[Thu Summer Camp2016]补退选 Trie树+STL-vector

    题目描述 X是T大的一名老师,每年他都要教授许多学生基础的C++知识.在T大,每个学生在每学期的开学前都需要选课,每次选课一共分为三个阶段:预选,正选,补退选:其中"补退选"阶段最 ...

  4. proteus仿真 引脚显示电平变化但不能显示波形

    proteus仿真 引脚显示电平变化但不能显示波形 原来是没有选择通道问题,proteus默认优先使用A通道才会显示波形,如果优先使用B,C,D通道,需要选择...

  5. 【POJ3693】Maximum repetition substring (SA)

    这是一道神奇的题目..论文里面说得不清楚,其实是这样...如果一个长度为l的串重复多次,那么至少s[1],s[l+1],s[2*l+1],..之中有相邻2个相等...设这时为j=i*l+1,k=j+l ...

  6. 秀秀的森林（forest）

    秀秀的森林(forest) 题目要求树上两条不相交的链,且要求权值的和最大 性质: 1.如果某棵树上的最长链端点为x,y,则该树上任意一点z出发的最长链为max(xz,zy) 2如果两个点被连进了树里 ...

  7. iOS - 毛玻璃效果封装

    #import <UIKit/UIKit.h> #import <Accelerate/Accelerate.h> @interface UIImage (TY_ImageEd ...

  8. jQuery重要插件！

    原文发布时间为:2009-08-05 -- 来源于本人的百度文章 [由搬家工具导入] 强烈推荐：240多个jQuery插件 概述 jQuery 是继 prototype 之后又一个优秀的 Javasc ...

  9. LeetCode OJ-- Recover Binary Search Tree ***@

    https://oj.leetcode.com/problems/recover-binary-search-tree/ 一棵二叉搜索树,二叉搜索树的特征是,中根遍历的话,得到的序列是递增的 题目中, ...

  10. PC网页js调用本地应用程序

    最近要现实一个在PC网页中实现点击按钮调用本地应用程序的功能 其实实现原理也非常简单, 首先注册一个本地注册表文件,指向本地应用程序路径 其次在网页中用js指向这个注册表文件,就可以实现网页调用本地应 ...