首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

AngularJS1.X学习笔记2-数据绑定详解

Posted in Javascript onApril 01, 2017

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

1、ng-bind

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
 <meta charset="UTF-8">
 <title>databinding1</title>
</head>
<body>
 <h1 ng-controller='dataCtrl' ng-bind='data'>
  
 </h1>

 <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
 <script type="text/javascript">
  angular.module('myApp',[])
  .controller('dataCtrl',function($scope){
   $scope.data = "你好啊！";
  })
 </script>
</body>
</html>

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

2、{{}}

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

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
 <meta charset="UTF-8">
 <title>databinding1</title>
</head>
<body>
 <h1 ng-controller='dataCtrl'>
  {{data}}
 </h1>

 <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
 <script type="text/javascript">
  angular.module('myApp',[])
  .controller('dataCtrl',function($scope){
   $scope.data = "你好啊！";
  })
 </script>
</body>
</html>

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

AngularJS1.X学习笔记2-数据绑定详解

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

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
 <meta charset="UTF-8">
 <title>databinding2</title>
</head>
<body ng-cloak>
 <h1 ng-controller='dataCtrl'>
  {{data}}
 </h1>

 <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
 <script type="text/javascript">
  angular.module('myApp',[])
  .controller('dataCtrl',function($scope){
   $scope.data = "你好啊！";
  })
 </script>
</body>
</html>

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

3、ng-bind-html

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

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
 <meta charset="UTF-8">
 <title>databinding3</title>
</head>
<body>
 <div ng-controller='dataCtrl' ng-bind='data'>
  
 </div>

 <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
 <script type="text/javascript">
  angular.module('myApp',[])
  .controller('dataCtrl',function($scope){
   $scope.data = "<h1 style='color:red;'>你好啊</h1>";
  })
 </script>
</body>
</html>

AngularJS1.X学习笔记2-数据绑定详解

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>databinding3</title>
</head>
<body>
  <div ng-controller='dataCtrl' ng-bind-html='data'>
    
  </div>

  <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
  <script type="text/javascript">
    angular.module('myApp',[])
    .controller('dataCtrl',function($scope){
      $scope.data = "<h1 style='color:red;'>你好啊</h1>";
    })
  </script>
</body>
</html>

换成ng-bind-html时出错了

AngularJS1.X学习笔记2-数据绑定详解

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

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
 <meta charset="UTF-8">
 <title>databinding3</title>
</head>
<body>
 <div ng-controller='dataCtrl' ng-bind-html='data'>
  
 </div>

 <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
 <script type="text/javascript">
  angular.module('myApp',[])
  .controller('dataCtrl',function($scope,$sce){
   $scope.data = $sce.trustAsHtml("<h1 style='color:red;'>你好啊</h1>");
  })
 </script>
</body>
</html

这样就可以了。

AngularJS1.X学习笔记2-数据绑定详解

4、ng-bind-template

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

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
 <meta charset="UTF-8">
 <title>databinding3</title>
</head>
<body>
 <div ng-controller='dataCtrl' ng-bind-template='{{data1}}爱{{data2}} '>
  
 </div>

 <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
 <script type="text/javascript">
  angular.module('myApp',[])
  .controller('dataCtrl',function($scope,$sce){
   $scope.data1 = "我";
   $scope.data2 = "中国";
  })
 </script>
</body>
</html>
<!-- 我爱中国-->

5、ng-non-bindable

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

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
 <meta charset="UTF-8">
 <title>databinding1</title>
</head>
<body>
 <h1 ng-controller='dataCtrl' ng-non-bindable>
  ng中绑定数据的方法是{{data}}
 </h1>

 <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
 <script type="text/javascript">
  angular.module('myApp',[])
  .controller('dataCtrl',function($scope){
   //$scope.data = "你好啊！";
  })
 </script>
</body>
</html>

6、双向数据绑定ng-model

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

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
 <meta charset="UTF-8">
 <title>databinding5</title>
</head>
<body>
 <div ng-controller='dataCtrl'>
  <h1>{{data}}</h1>
  <input type="text" name="data" ng-model="data">
 </div>
  
 
 <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
 <script type="text/javascript">
  angular.module('myApp',[])
  .controller('dataCtrl',function($scope){
   $scope.data = "你好啊！";
  })
 </script>
</body>
</html>

AngularJS1.X学习笔记2-数据绑定详解

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

7、小结一下

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

AngularJS1.X学习笔记2-数据绑定详解

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

AngularJS1.X学习笔记2-数据绑定详解

- Author -

大~熊

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js导出table数据到excel即导出为EXCEL文档的方法
Oct 10 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 Javascript
详解vue 组件的实现原理
Nov 12 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 #Javascript
JS正则获取HTML元素的方法
Mar 31 #Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 #Javascript
ES6中Generator与异步操作实例分析
Mar 31 #Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 #Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 #Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 #Javascript
IDEA(2) Fragment(1) Spring-Retry(1) Spring Boot(5) android studio(3) EventBus(1) 多线程(6) OpenLayer(1) 多维数组(1) Sqlite(2)
You might like
php的控制语句
2006/10/09 PHP
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
django定期执行任务(实例讲解)
2017/11/03 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
python根据url地址下载小文件的实例
2018/12/18 Python
浅析Python3 pip换源问题
2020/01/06 Python
python isinstance函数用法详解
2020/02/13 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
python画环形图的方法
2020/03/25 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
浅谈HTML5 服务器推送事件（Server-sent Events）
2017/08/01 HTML / CSS
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
网页美工求职信
2014/02/15 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
开工典礼策划方案
2014/05/23 职场文书
小学数学教研活动总结
2014/07/01 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
云台山导游词
2015/02/03 职场文书