AngularJS第二课：双向数据绑定

﹏ヽ暗。殇╰゛Y 2022-10-02 02:50 234阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

## 一.什么是双向数据绑定 ##

首先介绍作用域，相当于一个容器，里面有很多key-value的数据。当AngularJS遇到ng-app指令时就会创建一个名为$rootScope的作用域，它是AngularJS应用的根作用域。

AngularJS的双向数据绑定：假设页面有一个表单，当用户输入内容发生变化时，AngularJS框架就把表单内容同步到作用域中对应的变量中，而当我们改变作用域中的变量值时，AngularJS又会把修改后的变量值同步到表单中。

## 二.两个和数据绑定相关的指令：ng-model和ng-bind ##

(1) ng-model 双向数据绑定(作用域 <-> 视图)

在没有AngularJS之前，我们想要监听表单输入可能会这样做：

<div>用户名：<input type="text" name="uname" id="uname" /></div>
        <div><span id="info"></span></div>
        <script type="text/javascript">
            var uname = document.getElementById("uname");
            var info = document.getElementById("info");
            uname.onkeyup = function(){
                info.innerHTML = uname.value;
            }
        </script>

当时有了AngularJS之后，一行JS代码都不需要写，我们就能完成上面同样的工作：

<div>用户名：<input type="text" ng-model="uname" /></div>
        <div>{
        {uname}}</div>

这就是 ng-model指令：直接作为属性添加到input标签中，AngularJS会在作用域(全局或者控制器作用域)中添加一个uname的属性，同时和input输入框绑定。

(2) ng-bind 单向数据绑定(作用域 -> 视图)

ng-bind用于实现作用域到视图的单向数据绑定，可用于向界面中输出作用域中的数据。和表达式功能类似，但又有一点细微区别。在网络条件不好的时候，AngularJS加载缓慢，浏览器会直接把AngularJS表达式当作字符串渲染到页面中，会造成用户体验不好。使用ng-bind时，如果AngularJS没有加载完毕是不会解析执行的，只有AngularJS加载完毕才会执行。当我们需要作运算或者过滤时，必须使用表达式。

使用：a.作为属性：ng-bind="uname" ; b.作为class：class="ng-bind:uname"

## 三.一个简单的Demo理解数据绑定 ##

<!DOCTYPE html>
    <html ng-app>
    <head>
        <meta charset="utf-8">
        <title>Data Bind: ng-bind</title>
        <script type="text/javascript" src="../angular.js"></script>
    </head>
    <body ng-init="mult=0;multee=0">
        <div>用户名：<input type="text" ng-model="uname" /></div>
        <div ng-bind="uname"></div>
        <div class="ng-bind:uname"></div>
        <br/>
        <div>简单运算处理：</div>
        <div>乘数：<input type="number" ng-model="mult" /></div>
        <div>被乘数：<input type="number" ng-model="multee" /></div>
        <div>运算结果：{
        {mult*multee}}</div>
    </body>
    </html>

代码和笔记放在码云上：[AngularJS学习笔记和代码][AngularJS]

转载于:https://my.oschina.net/javamaster/blog/1632836

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/5e2c51e138c14edf976efbed850e213c.png
[AngularJS]: https://gitee.com/tangijia/anguarjs_learning_notes