首页
所有分类
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 相关文章推荐
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false)，remove()
Dec 02 Javascript
jquery图片上下tab切换效果
Mar 18 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
Bootstrap源码解读导航（6）
Dec 23 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 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
火星(2) 天问一号(1) 人造肉(1) 数据(1) 美国航天局(1) 毅力号(1) 塑料(1) 酶(1) NASA(1) 大脑(1)
You might like
基于mysql的论坛（1）
2006/10/09 PHP
php 禁止页面缓存输出
2009/01/07 PHP
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
js post方式传递提交的实现代码
2010/05/31 Javascript
JQUERY的属性选择符和自定义选择符使用方法（二）
2011/04/07 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
Vue表单实例代码
2016/09/05 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python字符串格式化输出方法分析
2016/04/13 Python
python发送邮件功能实现代码
2016/07/15 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
python 堆和优先队列的使用详解
2019/03/05 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
公路绿化方案
2014/05/12 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
生日寿星公答谢词
2015/09/29 职场文书
python获取对象信息的实例详解
2021/07/07 Python
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL