发表于: 2017-05-19 23:08:26

1 992


【JS-09】

小课堂【angularjs双向绑定后,发生了什么事情?是什么可以让view层和controller层进行绑定的?】

1.背景介绍

Angular中的数据绑定

数据绑定是AngularJS框架在模型和视图之间建立数据同步的一种机制。Angular中数据绑定的实现方式让模型成了数据的唯一可靠源。数据绑定又分为两种: 一种是单向绑定,另一种是双向绑定

2.知识剖析

模板(Template):指未经编译的附加了标记和指令的HTML

模型(model):用于展示数据或交互的变量

视图(view):最终渲染出来的页面

1,单向绑定(One-Way Data Binding)


Demo

2,双向绑定(Two-Way Data Binding)


Demo

3.常见问题

1,angular双向绑定的过程?

4.解决方案

5.编码实战

6.扩展思考

是什么可以让view层和controller层进行绑定的?

假如你点击一个按钮或者在输入框里输入东西,事件的回调函数就会在javascript解释器里执行,然后你就可以做任何DOM操作,等回调函数执行完毕时,浏览器就会相应地对DOM做出变化。 Angular拓展了这个事件循环,生成一个angular context的执行环境,这个执行环境中包含了两个东西:一个是$watch队列,另一个是$digest循环

$watch队列

    《Html》
        User:Password:《controoler.js》   
        app.controller('MainCtrl', function($scope) {
            $scope.user = "Foo";
            $scope.pass = "World";
        });

《Html》
        Hello, {{ World }}    

$digest循环

这个循环是处理什么的呢?$digest将会遍历我们的$watch

    
        嘿,$watch,你的值是什么?
        是9。
        好的,它改变过吗?
        没有,先生。
        (这个变量没变过,那下一个)
        你呢,你的值是多少?
        报告,是Foo。
        刚才改变过没?
        改变过,刚才是Bar。
        (很好,我们有DOM需要更新了)
        继续询问知道$watch队列都检查过。    

7.参考文献

参考文献一:view和controller的那些事儿

参考文献二:理解$watch ,$apply 和 $digest --- 理解数据绑定过程

参考文献三:廖雪峰的有关angular绑定的官方网站

8.更多讨论

谁决定什么事件进入angular context,而哪些又不进入呢?

$apply



返回列表 返回列表
评论

    分享到