AngularJS语法基础及数据绑定——详解各类数据绑定指令、属性应用

时间 2019-11-12

标签 angularjs 语法基础数据绑定详解各类指令属性应用栏目 AngularJS 繁體版

原文原文链接

　　AngularJS简单易学，可是功能强大。特别是在构建单页面应用方面效果显著。而数据绑定能够说是他被普遍使用的最主要的优势。他舍弃了对DOM的操做方式，一切都由AngularJS来自动更新视图，咱们没必要写操做dom的代码。接下来咱们就详细解释下AngularJS中数据绑定的方式，及其具体的使用规则、技巧。javascript

　　首先介绍下这次博客的内容：css

　　　　1.第一部分，介绍最最基本的AngularJS的根应用、控制器的基本语法，为初学者准备的。html

　　　　2.第二部分，详解如何数据绑定，3种绑定方式的区别。分别用于什么状况。java

　　那么，接下来，咱们就开始介绍了，对某一部分感兴趣的朋友，能够直接按照大标题一、2进行阅读。jquery

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>

　　如今咱们解释一下上面的代码：app

　　ng-app="myApp"　　是指定应用程序的根元素，也就是说，整个页面咱们全部的AnjularJs内容都必须包含在这个HTML标签中。dom

　　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 等直接绑定数据，那么系统默认这就是声明了一个全局变量。