上一篇从整体上认识了Angular，从现在开始更加深入的学习Angular的特性。本次学习的是数据绑定。应该所有的MVC框架都会用到数据绑定，比如我所知道的ThinkPHP、struts等，只有实现了数据绑定才能将模型层和视图层分离，实现MVC。Angular的数据绑定比较特别，它支持双向数据绑定。

1、ng-bind

　

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>databinding1</title>
  6. </head>
  7. <body>
  8.     <h1 ng-controller='dataCtrl' ng-bind='data'>
  9.  
  10.     </h1>
  11.  
  12.     <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
  13.     <script type="text/javascript">
  14.         angular.module('myApp',[])
  15.         .controller('dataCtrl',function($scope){
  16.             $scope.data = "你好啊！";
  17.         })
  18.     </script>
  19. </body>
  20. </html>

　　ng-bind实现了一个简单单向绑定。

2、{{}}

　　类似ng-bind，用的比较多。

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>databinding1</title>
  6. </head>
  7. <body>
  8.     <h1 ng-controller='dataCtrl'>
  9.         {{data}}
  10.     </h1>
  11.  
  12.     <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
  13.     <script type="text/javascript">
  14.         angular.module('myApp',[])
  15.         .controller('dataCtrl',function($scope){
  16.             $scope.data = "你好啊！";
  17.         })
  18.     </script>
  19. </body>
  20. </html>

　　这种绑定的缺点是，开始加载时可能会出现类似{{data}}这样的东西。

　　解决方法是使用ng-bind或ng-cloak，ng-cloak应该只在有数据绑定的地方使用，否则处理中用户将看到空白。

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>databinding2</title>
  6. </head>
  7. <body ng-cloak>
  8.     <h1 ng-controller='dataCtrl'>
  9.         {{data}}
  10.     </h1>
  11.  
  12.     <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
  13.     <script type="text/javascript">
  14.         angular.module('myApp',[])
  15.         .controller('dataCtrl',function($scope){
  16.             $scope.data = "你好啊！";
  17.         })
  18.     </script>
  19. </body>
  20. </html>

　　我测试了一下ng-cloak，不知道为什么不行，有人知道的话请告知一下。

3、ng-bind-html

　　这个指令可以用html的方式处理数据，它不会将html代码解析成实体。下面对比一下ng-bind和ng-bind-html.

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>databinding3</title>
  6. </head>
  7. <body>
  8.     <div ng-controller='dataCtrl' ng-bind='data'>
  9.  
  10.     </div>
  11.  
  12.     <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
  13.     <script type="text/javascript">
  14.         angular.module('myApp',[])
  15.         .controller('dataCtrl',function($scope){
  16.             $scope.data = "<h1 style='color:red;'>你好啊</h1>";
  17.         })
  18.     </script>
  19. </body>
  20. </html>

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>databinding3</title>
  6. </head>
  7. <body>
  8.     <div ng-controller='dataCtrl' ng-bind-html='data'>
  9.  
  10.     </div>
  11.  
  12.     <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
  13.     <script type="text/javascript">
  14.         angular.module('myApp',[])
  15.         .controller('dataCtrl',function($scope){
  16.             $scope.data = "<h1 style='color:red;'>你好啊</h1>";
  17.         })
  18.     </script>
  19. </body>
  20. </html>

　　换成ng-bind-html时出错了

　　这是因为Angular默认是不信任html的，所以要这样做。

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>databinding3</title>
  6. </head>
  7. <body>
  8.     <div ng-controller='dataCtrl' ng-bind-html='data'>
  9.  
  10.     </div>
  11.  
  12.     <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
  13.     <script type="text/javascript">
  14.         angular.module('myApp',[])
  15.         .controller('dataCtrl',function($scope,$sce){
  16.             $scope.data = $sce.trustAsHtml("<h1 style='color:red;'>你好啊</h1>");
  17.         })
  18.     </script>
  19. </body>
  20. </html

　　这样就可以了。

4、ng-bind-template

　　ng-bind只接受单个数据绑定表达式，而ng-bind-template则相对灵活些。

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>databinding3</title>
  6. </head>
  7. <body>
  8.     <div ng-controller='dataCtrl' ng-bind-template='{{data1}}爱{{data2}} '>
  9.  
  10.     </div>
  11.  
  12.     <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
  13.     <script type="text/javascript">
  14.         angular.module('myApp',[])
  15.         .controller('dataCtrl',function($scope,$sce){
  16.             $scope.data1 = "我";
  17.             $scope.data2 = "中国";
  18.         })
  19.     </script>
  20. </body>
  21. </html>
    <!-- 我爱中国-->

5、ng-non-bindable

　　有时我们使用了{{}}但是我们并不是要绑定数据，直接用会出错，所以要像这样

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>databinding1</title>
  6. </head>
  7. <body>
  8.     <h1 ng-controller='dataCtrl' ng-non-bindable>
  9.         ng中绑定数据的方法是{{data}}
  10.     </h1>
  11.  
  12.     <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
  13.     <script type="text/javascript">
  14.         angular.module('myApp',[])
  15.         .controller('dataCtrl',function($scope){
  16.             //$scope.data = "你好啊！";
  17.         })
  18.     </script>
  19. </body>
  20. </html>

6、双向数据绑定ng-model

　　双向数据绑定允许元素从用户处收集数据以改变程序状态。

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>databinding5</title>
  6. </head>
  7. <body>
  8.     <div ng-controller='dataCtrl'>
  9.         <h1>{{data}}</h1>
  10.         <input type="text" name="data" ng-model="data">
  11.     </div>
  12.  
  13.     <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
  14.     <script type="text/javascript">
  15.         angular.module('myApp',[])
  16.         .controller('dataCtrl',function($scope){
  17.             $scope.data = "你好啊！";
  18.         })
  19.     </script>
  20. </body>
  21. </html>

　　你会发现文本框的内容和h1中的内容同步变化。

7、小结一下

　　与数据绑定的相关指令如下

　　

　　下面开始学习模板指令。2017-03-31 20:41:59

AngularJS1.X学习笔记2-数据绑定的更多相关文章

  1. SpringMVC:学习笔记(5)——数据绑定及表单标签

    SpringMVC——数据绑定及表单标签 理解数据绑定 为什么要使用数据绑定 基于HTTP特性,所有的用户输入的请求参数类型都是String,比如下面表单: 按照我们以往所学,如果要获取请求的所有参数 ...

  2. 微信小程序学习笔记二 数据绑定 + 事件绑定

    微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...

  3. AngularJS1.X学习笔记1-整体看看

    听说 明天是愚人节,这与我有什么关系呢!我可 不想被愚弄,但是但是,我这么笨怎么才能不被愚弄呢?左思右想,我决定从现在开始闭关,闭关干啥哩?学习!学习AngularJS.以前学习过Angular的,不 ...

  4. AngularJS1.X学习笔记5-加强版的表单

    大家愚人节快乐!表单是沟通服务器端和客户端的桥梁,为数据从客户端传到服务端打开了一扇大门.AngularJS增加了一些新特性,使我们能够更加方便的操作表单.OK!开始学习!学习使我快乐. 一.双向数据 ...

  5. AngularJS1.X学习笔记3-内置模板指令

    前面学习了数据绑定指令,现在开始学习内置模板指令.看起来有点多,目测比较好理解.OK!开始! 一.ng-repeat 1.基本用法 <!DOCTYPE html> <html lan ...

  6. Angular4.0从入门到实战打造在线竞拍网站学习笔记之四--数据绑定&管道

    Angular4.0基础知识之组件 Angular4.0基础知识之路由 Angular4.0依赖注入 数据绑定 数据绑定允许你将组件控制器的属性和方法与组件的模板连接起来,大大降低了开发时的编码量. ...

  7. AngularJS1.X学习笔记6-控制器和作用域

    经过一番艰苦卓绝的鏖战,我终于来到了控制器和作用域部分.控制器作为MVC的C,其重要性不可谓不重要:作用域决定了你可以拿到哪些东西,亦是分外重要.现在就来学习一下两个东西.去看看$apply,$wat ...

  8. AngularJS1.X学习笔记4-内置事件指令及其他

    AngularJS为我们定义了一系列事件指令,方便我们对用户的操作作出响应.甚至他还有一个可选模块提供了触摸事件和手势事件的支持,为移动端开发提供了可能.现在开始学习一下AngularJS的事件指令. ...

  9. AngularJS1.X学习笔记13-动画和触摸

    本文主要涉及了ngAnimation和ngTouch模块,自由男人讲的比较少,估计要用的时候还要更加系统的学习一下. 一.安装 没错,就是酱紫. 二.玩玩动画 <!DOCTYPE html> ...

随机推荐

  1. VS2008编译汇编程序的问题

    在VS2008 pro里已经集成了MASM,经过相关设置后,编译出了程序,但是执行后,说少msvcr90.dll39944然后自己写了个39945 那个testprintf是执行正常的.虽然两个都有引 ...

  2. devexpress控件layoutview特效之一旋转木马的实现

    1.devexpress有很多很好的特效,最近做了个旋转木马的特效,给大家分享下.效果图如下: 2.这里的控件为gridcontrol,里面的view为layoutview.数据绑定的代码与其他gri ...

  3. idea常用设置

    Idea删除当前行的快捷键是Ctrl+y,复制当前行的快捷键是Ctrl+d,和eclipse的习惯不一样.虽然可以一键把idea的快捷键映射成eclipse,但是这样做代价太大,如果这样,idea的官 ...

  4. 在 Windows 上测试 Redis Cluster的集群填坑笔记

    redis 集群实现的原理请参考http://www.tuicool.com/articles/VvIZje       集群环境至少需要3个节点.推荐使用6个节点配置,即3个主节点,3个从节点. 新 ...

  5. linux c++ 加载动态库常用的三种方法

    链接库时的搜索路径顺序:LD_LIBRARY_PATH --> /etc/ld.so.conf --> /lib,/usr/lib 方法1. vi .bash_profile    设置环 ...

  6. iOS runtime的应用实例

      一直想弄明白runtime是怎么回事,因为面试的时候这是一道必备问题,但是平时用的机会真的少之又少,我一度以为runtime只是用来装13的利器,没什么卵用.但是随着学习的增多,发现runtime ...

  7. Python脚本收集腾讯云CDN日志，并入ELK日志分析

    负责搭建公司日志分析,一直想把CDN日志也放入到日志分析,前些日志终于达成所愿,现在贴出具体做法: 1.收集日志 腾讯云CDN日志一般一小时刷新一次,也就是说当前只能下载一小时之前的日志数据,但据本人 ...

  8. 【转】Mysql分页语句Limit用法

    http://qimo601.iteye.com/blog/1634748 FAQ: MYSQL limit,offset 区别 SELECT keyword FROM `keyword_rank` ...

  9. ASP.NET Core MVC上传、导入、导出知多少

    前言 本君已成夜猫子,本节我们来讲讲ASP.NET Core MVC中的上传,这两天才研究批量导入功能,本节顺便简单搞搞导入.导出,等博主弄妥当了再来和大家一并分享. .NET Core MVC上传 ...

  10. 项目架构开发：数据访问层之Cache

    数据访问层简单介绍 数据访问层,提供整个项目的数据访问与持久化功能.在分层系统中所有有关数据访问.检索.持久化的任务,最终都将在这一层完成. 来看一个比较经典的数据访问层结构图 大概可以看出如下信息 ...