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-数据绑定详解

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

Javascript 相关文章推荐
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
a标签调用js的方法总结
Sep 05 Javascript
原生js实现随机点名功能
Nov 05 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
You might like
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
检测png图片是否完整的php代码
2010/09/06 PHP
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
js实现图片上传并预览功能
2018/08/06 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
Python中eval带来的潜在风险代码分析
2017/12/11 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
python移位运算的实现
2019/07/15 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
消防安全宣传标语
2014/06/07 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
2015年工程师工作总结
2015/04/30 职场文书
2015年度女工工作总结
2015/10/22 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
技术入股合作协议书
2016/03/21 职场文书
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技