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 相关文章推荐
js实现兼容IE、Firefox的图片缩放代码
Dec 08 Javascript
JavaScript Array对象详解
Mar 01 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
vue中实现图片压缩 file文件的方法
May 28 Javascript
全面解析JavaScript Module模式
Jul 24 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 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
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
电子邮箱格式怎么写
2014/01/12 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
就业协议书范本
2014/10/08 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
ES6 解构赋值的原理及运用
2021/05/25 Javascript
JavaScript流程控制(循环)
2021/12/06 Javascript