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语法基础及数据绑定——详解各种数据绑定指令、属性应用的更多相关文章

  1. 转载 《AngularJS》5个实例详解Directive（指令）机制

    <AngularJS>5个实例详解Directive(指令)机制 大漠穷秋 本文整理并扩展了<AngularJS>这本书第六章里面的内容,此书近期即将由电子工业出版社出版,敬请 ...

  2. 《AngularJS》5个实例详解Directive（指令）机制

    本文整理并扩展了<AngularJS>这本书第六章里面的内容,此书近期即将由电子工业出版社出版,敬请期待口令:Angular 1.一点小说明 指令的作用:实现语义化标签 我们常用的HTML ...

  3. (转)总结之：CentOS 6.5 MySQL数据库的基础以及深入详解

    总结之:CentOS 6.5 MySQL数据库的基础以及深入详解 原文:http://tanxw.blog.51cto.com/4309543/1395539 前言 早期MySQL AB公司在2009 ...

  4. python基础之函数详解

    Python基础之函数详解 目录 Python基础之函数详解 一.函数的定义 二.函数的调用 三.函数返回值 四.函数的参数 4.1 位置参数 4.2 关键字参数 实参:位置实参和关键字参数的混合使用 ...

  5. 基础拾遗------redis详解

    基础拾遗 基础拾遗------特性详解 基础拾遗------webservice详解 基础拾遗------redis详解 基础拾遗------反射详解 基础拾遗------委托详解 基础拾遗----- ...

  6. 基础拾遗------webservice详解

    基础拾遗 基础拾遗------特性详解 基础拾遗------webservice详解 基础拾遗------redis详解 基础拾遗------反射详解 基础拾遗------委托详解 基础拾遗----- ...

  7. AngularJS select中ngOptions用法详解

    AngularJS select中ngOptions用法详解   一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...

  8. Solr系列五：solr搜索详解（solr搜索流程介绍、查询语法及解析器详解）

    一.solr搜索流程介绍 1. 前面我们已经学习过Lucene搜索的流程,让我们再来回顾一下 流程说明: 首先获取用户输入的查询串,使用查询解析器QueryParser解析查询串生成查询对象Query ...

  9. Hadoop基础-Idea打包详解之手动添加依赖（SequenceFile的压缩编解码器案例）

    Hadoop基础-Idea打包详解之手动添加依赖(SequenceFile的压缩编解码器案例) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.编辑配置文件(pml.xml)(我 ...

随机推荐

  1. STM32学习笔记（一）——点亮一个LED

    引言 最近报名了2017全国大学生电子设计竞赛,我们学校是第一次参加这个比赛,由于8/9月份就要比赛了,所以现在准备是比较晚的了,指导老师说只能做控制类的题目了,让我们学习一下STM32单片机,51到 ...

  2. 基础SELECT示例掌握

    SELECT查询语句 ---进行单条记录.多条记录.单表.多表.子查询-- SELECT [ALL | DISTINCT | DISTINCTROW ] [HIGH_PRIORITY] [MAX_ST ...

  3. WPF中button按钮同时点击多次触发click解决方法

    DateTime lastClick = DateTime.Now; object obj = new object(); ; private void Button_Click(object sen ...

  4. C++queue容器学习(详解)

    一.queue模版类的定义在<queue>头文件中. queue与stack模版非常类似,queue模版也需要定义两个模版参数,一个是元素类型,一个是容器类型,元素类型是必要的,容器类型是 ...

  5. Java集合之Map和Set

    以前就知道Set和Map是java中的两种集合,Set代表集合元素无序.不可重复的集合:Map是代表一种由多个key-value对组成的集合.然后两个集合分别有增删改查的方法.然后就迷迷糊糊地用着.突 ...

  6. perf学习-linux自带性能分析工具

    目前在做性能分析的事情,之前没怎么接触perf,找了几篇文章梳理了一下,按照问题的形式记录在这里. 方便自己查看.   什么是perf? linux性能调优工具,32内核以上自带的工具,软件性能分析. ...

  7. Codeforces Round #410 (Div. 2)C题

    C. Mike and gcd problem time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  8. redis持久化快速回忆手册

    Redis提供的持久化机制: 1). RDB持久化:该机制是指在指定的时间间隔内将内存中的数据集快照写入磁盘. 2). AOF持久化:该机制将以日志的形式记录服务器所处理的每一个写操作,在Redis服 ...

  9. 镜像的缓存特性 - 每天5分钟玩转 Docker 容器技术（14）

    上一节我们学习了镜像的分层结构,今天讨论镜像的缓存特性. Docker 会缓存已有镜像的镜像层,构建新镜像时,如果某镜像层已经存在,就直接使用,无需重新创建. 举例说明.在前面的 Dockerfile ...

  10. 2017最新最稳定的彩票源码PHP+mysql 新增彩种+全新界面

    网站后台管理系统:新闻资讯系统 用户管理系统用户登录日志彩种规则说明玩法时间设置彩票期号管理足球对阵管理彩票方案撤单彩票出票管理开奖号码管理彩票方案查询彩票中奖查询 彩票追号查询服务支持中心财务中心管 ...