双向绑定

AngularJS在$scope变量中使用脏值检测来实现了数据双向绑定。

Scope作用：

1.通过数据共享连接Controller和View

2.事件的监听和响应

3.脏值检测和数据绑定

双向数据绑定最经常的应用场景就是表单了，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户的数据存放到数据模型中了。因为输入框中的ng-model和控制器中的数值实现了双向绑定，所以更改输入框的值或者更改控制器中的值，都会相应的更改双方的值。$scope对象，我们可以理解为NG框架中的一个作用域对象，在该作用域内可以做到数据和视图的相互绑定，同时又能与其他$scope对象的作用域隔离开来。

当然，$scope也可以实现继承，在一个controller里面的作用域可以继承它上一级的scope这样就不是独立存在了。

脏值检测

$watch：AngularJS会首先将你在{{ }}中声明的表达式编译成函数并调用$watch方法。$watch方法为当前scope注册了一个watcher，这个watcher会被保存到一个scope内部维护的数组中。

$digest : 1.检测（注册的watch函数） 2.通知（就会触发对应的listener函数）

$apply：这个方法能够触发$digest方法。$digest方法的执行就标志着一轮Digest Cycle的开始。

一个购物车的例子

<span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html>
<html ng-app="mymodule">
<head><meta charset="utf-8"><link rel="stylesheet" href="css/bootstrap.min.css"></head>
<body>
<div class="panel panel-default panel-primary"><div class="panel-heading">我的购物车</div><div class="panel-body">
<!--ng-repeat ng-click  -->
<!--scope注册了一个watcher--><!--1.AngularJS会首先将你在{{ }}中声明的表达式编译成函数并调用$watch方法--><!--2.$watch方法的第一个参数是一个函数，它通常被称为watch函数，它的返回值声明需要监听的变量；第二个参数是listener，在变量发生改变的时候会被调用。--><table ng-controller="CartController" class="table table-bordered"><tr><th>序号</th><th>商品</th><th>单价</th><th>数量</th><th>金额</th><th>操作</th></tr><tr ng-repeat="item in items"><td>{{$index + 1}}</td><td>{{item.name}}</td><td>{{item.price | currency}}</td> <!--filter应用--><td><input ng-model="item.quantity"></td><td>{{item.quantity * item.price | currency}}</td><td><button ng-click="remove($index)">Remove</button></td></tr></table></div></div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="ng-repeat.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script> </html></span>

<span style="font-family:Microsoft YaHei;font-size:18px;">jS中代码：</span>

<span style="font-family:Microsoft YaHei;font-size:18px;">var mymodule=angular.module('mymodule', []);
mymodule.controller('CartController', ['$scope', function CartController($scope) {$scope.items = [{name: "Angular应用", quantity: 1, price: 199.00},{name: "Angular入门", quantity: 1, price: 139.00},{name: "AngularJS权威教程", quantity: 2, price: 84.20}];//直接绑定事件remove$scope.remove = function (index) {$scope.items.splice(index, 1);}}
])</span>

总结

想象这样的好处，不用页面刷新，数据立刻返回给页面。一直在循环检测是否自己被“污染”了，如果有变化，就通知另一边跟着变化。这样的震荡检测有没有问题呢，双向绑定使用在一个页面上太多，应该也会效率降低吧？请大神们前来交流。

AngularJS（2）——AngularJS数据双向绑定相关推荐

Angular数据双向绑定
本文转载自: http://www.cnblogs.com/jingwhale/p/5117419.html 作者:jingwhale 转载请注明该声明. Angular数据双向绑定 AngularJ ...
html 数据双向绑定,javascript实现数据双向绑定的三种方式小结
前端数据的双向绑定方法前端的视图层和数据层有时需要实现双向绑定(two-way-binding),例如mvvm框架,数据驱动视图,视图状态机等,研究了几个目前主流的数据双向绑定框架,总结了下.目前实 ...
EngJS(超轻量) 中数据双向绑定如何使用
Eng github 所有支持数据双向绑定的js工具 ,触发双向关系的基本方式无外乎 wather关系和事件关系两种 . 前者操作数据时 ,后者触发事件时. 下面简单的介绍Eng 中的 w ...
小猿圈解析vue数据双向绑定的缺点
vue是当今前端很流行的一种框架,但是vue也是有一定的缺陷的,你有过了解吗?下面小猿圈web前端老师就为你解析一下vue数据双向绑定的缺陷,希望对你有所帮助,下面我们一起了解一下吧. 1.vue 实 ...
vue中通过数据双向绑定给video标签的src赋值，只有第一次有效，怎么解决？
场景:在一个视频列表页面,点击视频列表,则全屏播放视频.全屏播放是一个公用组件,每次点击视频列表则把该视频的播放地址通过vue的数据双向绑定到组件中的video标签,如下: <video con ...
数据双向绑定_手把手教你用JavaScript如何实现数据双向绑定
近几年前端技术栈真是发展的太迅速了,从以前的针对dom操作的框架如jquery,ext.js等框架逐步过渡到当前的mvvm模式,让前端开发者将注意力从dom操作逐渐解脱出来,专注于逻辑的实现,个人认为 ...
Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...
西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
小程序input实现数据双向绑定
小程序input实现数据双向绑定最终效果 index.wxml index.js 最终效果 index.wxml <view class="uploader">< ...

AngularJS（2）——AngularJS数据双向绑定

双向绑定

脏值检测

一个购物车的例子

总结

AngularJS（2）——AngularJS数据双向绑定相关推荐

最新文章

热门文章