AngularJS语法基础及数据绑定——详解各种数据绑定指令属性应用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJS语法基础及数据绑定——详解各种数据绑定指令属性应用相关的知识，希望对你有一定的参考价值。
AngularJS简单易学，但是功能强大。特别是在构建单页面应用方面效果显著。而 数据绑定 可以说是他被广泛使用的最主要的优点。他舍弃了对DOM的操作方式，一切都由AngularJS来自动更新视图，我们不必写操作dom的代码。接下来我们就详细解释下AngularJS中数据绑定的方式，及其具体的使用规则、技巧。
首先介绍下此次博客的内容：
1.第一部分，介绍最最基本的AngularJS的根应用、控制器的基本语法，为初学者准备的。
2.第二部分，详解如何数据绑定，3种绑定方式的区别。分别用于什么情况。
那么，接下来，我们就开始介绍了，对某一部分感兴趣的朋友，可以直接按照大标题1、2进行阅读。
1. AngularJS基础语法
首先，我们看一段简单的代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS入门</title> <style type="text/css"> div{ width: 150px; height: 50px; line-height: 50px; border-radius: 25px; background-color: darkorange; margin-top: 20px; text-align: center; } </style> </head> <body ng-app="myApp" ng-controller="myControl"> </body> <script language="javascript" src="js/jquery-3.1.1.min.js"></script> <script language="JavaScript" src="js/angular.min.js"></script> <script type="text/javascript"> // 他是链式语法,不同控制器可以直接在后面加点连接 angular.module("myApp",[]) .controller("myControl",function($scope){ $scope.d = "我是自定义的变量"; }) </script> </html>
现在我们解释一下下面的代码：
ng-app="myApp" 是指定应用程序的根元素，也就是说，整个页面我们所有的AnjularJs内容都必须包含在这个HTML标签中。
ng-controller="myControl" 是给我们的应用添加控制器，我们通过不同名字的控制器将整个应用划分为若干个模块，实现不同的功能。
angular.module("myApp",[]) .controller("myControl",function($scope，$rootscope){ $scope.d = "我是自定义的变量"; }) AnjularJs是链式语法,可以直接在后面加点连接实现调用。angular.module("myApp",[])是规定的格式化写法，函数内第一个参数时应用的名称；第二个参数是一个数组，注入我们需要的模块名称，注意此参数不可省略。controller函数，第一个参数传入控制器名称；第二个参数传入一个构造函数，函数的形参$scope代指用特定义的变量是局部有效的，在当前控制器有效。$rootscope，用他定义的变量在整个app中有效，不局限于某个控制器。
$scope.d = "我是自定义的变量"; 这是定义变量，并赋值。$scope定义的是当前控制器有效的局部变量；$rootscope定义的是全局变量，在整个app范围内有效。
这里只是简单的介绍了应用、处理器、变量的定义与使用，想了解的更加详细建议去 菜鸟教程 查看更加详细的说明。
2. 详解数据绑定
首先我们看一段代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS入门</title> <style type="text/css"> div{ width: 200px; height: 50px; line-height: 50px; border-radius: 25px; background-color: darkorange; margin-top: 20px; text-align: center; } </style> </head> <body ng-app="myApp" ng-controller="myControl"> <div ng-init="a=‘打印出我来‘">下面是绑定数据的div</div> <!--ng-bind 指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML标签里的内容。--> <div ng-bind="a">+我是原来的内容</div> <!--{{a}}双层大括号，里面加变量名，也是数据绑定，但是刷新会显示出大括号来--> <div>{{a}}+我是原来的内容</div> <!--他是一个双向绑定，将HTML内容与变量绑定在一起，无论改变哪一个的值，另一个都会发生变化--> <input type="text" name="text" id="text" value="" ng-model="b"/> <div ng-bind="b" ng-init="b=‘aaaa‘"></div> <div>{{b}}</div> <script language="JavaScript" src="js/jquery-3.1.1.min.js"></script> <script language="JavaScript" src="js/angular.min.js"></script> <script type="text/javascript"> // 他是链式语法,不同控制器可以直接在后面加点连接 angular.module("myApp",[]) .controller("myControl",function($scope){ $scope.d = "我是自定义的变量"; }) </script> </html>
其效果如下图所示：
那么实现数据绑定都有那些方式呢？基本上有3种:
(1) {{变量/表达式}} 通过这种方式直接绑定数据。注意：a.他是直接修改标签的内容。原来内容不变，再插入变量的内容。b.浏览器需要首先加载index.html页面，渲染它，然后AngularJS才能把它解析成你期望看到的内容。所以，用户会刷新看到大括号的存在。c.他是单向绑定，只能通过修改变量的值来改变标签的内容。
(2) ng-bind="变量" 直接将变量绑定到HTML标签中。注意：a.他是直接重置标签的内容。原本的内容清空直接写入新的变量的内容。b.他不会出现刷新显示大括号的问题。c.他是单向绑定，只能通过修改变量的值来改变标签的内容。
(3) ng-model="b" + ng-bind="b" 。可以理解为先将标签的属性值取出来绑定到变量上，再将变量绑定到另一个标签上。
注意：a. <input>, <select>, <textarea>,元素支持该指令。也就这几个可以输入的表单元素可以绑定。b.ng-model绑定好的变量，可以用上述两种方式的一种来绑定到标签中。这个看具体的需求。c.他是一个双向绑定，将HTML内容与变量绑定在一起，无论改变哪一个的值，另一个都会发生变化。例如上述代码中，给变量b进行了初始化，然后input输入框的value值就默认是b的值了。
而对于ng-model还有对应的设置他的其他参数的属性，ng-model-options，都可以设置如下属性值：
{updateOn: ‘event‘}规则指定事件发生后绑定数据
{debounce : 1000} 规定等待多少毫秒后绑定数据
{allowInvalid : true|false} 规定是否需要验证后绑定数据
{getterSetter : true|false} 规定是否作为 getters/setters 绑定到模型
{timezone : ‘0100‘} 规则是否使用时区
举例说明一下，我们加入如下代码：
<input type="text" name="text" id="text" value="" ng-model="c" ng-model-options="{debounce : 2000}"/> <div ng-bind="c">11111</div>
<div ng-bind="d"></div>
效果如图所示：
看图可知，input和div的数据并没有在一开始的时候进行绑定，而是延迟了2s左右才绑定的，至于其他属性值的用法也就和这个大同小异了。
这里有个地方需要提一下：就是如果在控制器当中没有定义对应变量，而在HTML中直接 ng-bind 等直接绑定数据，那么系统默认这就是声明了一个全局变量。
以上是关于AngularJS语法基础及数据绑定——详解各种数据绑定指令属性应用的主要内容，如果未能解决你的问题，请参考以下文章
Vue.js 基础指令实例讲解（各种数据绑定表单渲染大总结）——新手入门高手进阶
再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结
再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结