AngularJS第二课：双向数据绑定

最新推荐文章于 2024-06-12 11:59:04 发布

weixin_34015860

最新推荐文章于 2024-06-12 11:59:04 发布

阅读量59

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/javamaster/blog/1632836

版权

2019独角兽企业重金招聘Python工程师标准>>>

一.什么是双向数据绑定

首先介绍作用域，相当于一个容器，里面有很多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学习笔记和代码

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