Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定

简介: ### 一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题。 #### 1.
### 一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题。 #### 1.1数据从html流向controller 也就是从**视图层**流向**模型层**,原生html中需要使用表单元素(例如`input`标签)来收集用户输入信息,Angularjs中通过在表单元素上使用`ng-model`标签,当用户输入信息时,同步将用户输入的信息赋值给controller中的变量: ```html

改变输出值:

``` 在页面上输入1234567即可看到,每次在页面输入数字后,控制台输出的`$scope,testInfo.content`的值都和页面保持一致: ![](http://i2.51cto.com/images/blog/201807/17/1ee8df7ae9e63a2e34ea91f8542e73d1.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=) #### 1.2 数据从controller流向html 也就是从**模型层**流向**数据层**,当controller中的数据模型变量发生变化后,Angularjs又会根据数据模型的值去改变`ng-model`指令绑定的表单元素的值,使用`ng-bind`指令也可以被动获得来自controller的数据流。 我们编写如下demo进行测试: ```html

改变输出值:

使用ng-bind绑定的标签:

``` demo中,每次点击**+1**按钮,`$scope.testInfo.content`的值会增加1,我们可以看到页面上的结果: ![](http://i2.51cto.com/images/blog/201807/17/a23229201a28c36fa4048e287f4e63cb.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=) #### 1.3 你丫倒是刷视图啊 来看看第一个*活见鬼*的例子,demo跟上面很类似,只是将**鼠标点击触发**的方式改成了**定时器自动触发**: ```html

改变输出值:

使用ng-bind绑定的标签:

``` 你会活见鬼地发现,数据模型一直在变,但是页面却没有刷新: ![](http://i2.51cto.com/images/blog/201807/17/ed632aca97e358f881a265a256968a00.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=) > 这里就是 `Angularjs1.X`双向数据绑定中的第一个坑 ,你会发现**$scope上绑定的数据模型**和**html中显示的内容**有时候并不是实时关联的。这其实和`Angularjs1.X`的执行机制有关系。 如果我们自己来考虑,javascript中有一个变量的值发生了变化,现在要将这个值同步到html页面上,需要怎么做呢?我们需要获取到这个DOM元素,然后改变它的`innerHTML`属性,如果是表单元素就修改`value`。其实`Angularjs`也是这样做的,只不过使用了自己的封装的方法——**$apply()**。那么此处的问题其实就在于,在`setInterval`的回调函数中去修改数据模型的值时,没有触发**$apply()**方法来更新视图,而通过调用`Angularjs`封装的`ng-*`方法(例如`ng-click`点击方法)来修改视图模型时,会自动触发**$apply()**方法,视图也就同步刷新了。 - 解决方案1 使用`Angularjs`封装过的`$interval`服务来实现定时任务,感兴趣的读者可以自己看一下`Angularjs`源码中`$intervalProvider`的部分,就会发现在方法最后的地方调用了`$rootScope.$apply()`。 - 解决方案2 如果依然使用javascript原生的定时方法,那么则需要在修改完视图的数据模型后,手动调用`$scope.$apply()`方法来将数据模型的变动同步到html页面中。 ### 二. Controller与Directive中的双向数据绑定 除了controller与html中的双向绑定,`Angularjs`中还有另一个**双向数据绑定**,那就是controller与directive之间的**绑定**。绑定的形式有很多种,我们先来看一下最常见的**双向绑定**。 #### 2.1 directive中的双向数据绑定 在设定自定义指令的`scope`参数时,将属性的值设置为`=`就可以实现双向数据绑定,这里API的解释是: *父级controller中的指定变量会与自定义指令link函数中的变量**相互影响***。 下面的实例中,我们将看看controller中的数据模型`$scope.testInfo.content`的值与自定义指令中`scope.pagination`如何相互影响,是否如定义所说这里的绑定真的是双向的。示例界面如下(demo源码请见附件*demo.html*文件): ![](http://i2.51cto.com/images/blog/201807/17/ef6eb37c6c261990657217ea49e8395a.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=) - 每次点击`+1`按钮,`Scope.testInfo.content`的值都会增加1 - 每次点击`show $scope.testInfo`,控制台都会打印出`$scope.testInfo`的值 - 每次点击标签上的数字,则会打印出自定义指令中`scope.pagination`的值,并将该值进行自增 接下来的测试操作,我们将按照如下的流程进行: 1. 点击5次`+1`按钮,再点击5次数字标签 2. 点击`show $scope.testInfo`按钮 #### 2.2 你丫怎么又不刷新了 随着上一节的操作步骤,我们一起来见证**双向数据绑定**中又一次闹鬼事件: - 点击5次`+1`按钮,再点击5次数字标签 结果为: ![](http://i2.51cto.com/images/blog/201807/17/acaeb752bd49785fba92c8bb1beb65eb.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=) 我们看到,第一次点击数字标签时,控制台打出了link函数中`scope.pagination`的值为5,这说明**`$scope.testInfo.content`的值被传递给了自定义指令中的`scope.pagination`,也就是说数据从controller流向了directive**。而当我们再点击4次数字标签(一共点了5次)后,从控制台可以看出,`scope.pagination`的值已经成为10,而页面上使用`ng-bind`指令获取到的结果却依旧是**5**。也就是说,**数据从没有从directive流向controller**。是不是有一种被骗的感觉?别着急,接着看。 - 点击`show $scope.testInfo`按钮 结果为: ![](http://i2.51cto.com/images/blog/201807/17/669418ad6f649a9241a0f5f02794615c.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=) 当我们点击`show $scope.testInfo`时,控制台打印出了$scope.testInfo.content的值为5,这下证据坐实了,明明说好的双向数据绑定,然而当自定义指令中的`scope.pagination`改变时,`$scope.testInfo.content`并没有跟着一起改变。**But!!!!**我们会发现,这个`show $scope.testInfo`点下去以后,页面上通过`ng-bind`绑定的值却变成了**10**。也就是说,**数据又从directive流回了controller**。 官方建议使用`$watch`方法来追踪scope中的变量,而当我们这样做时,会发现`$watch`函数**仅能追踪到那些通过修改controller中的数据模型而影响link函数中变量的行为并更新视图**。 > 这里就是 `Angularjs1.X`双向数据绑定中的第二个坑,controller和directive中所谓的**双向数据绑定**,并不能追踪指定变量的所有变化,而且不是同步完成的。 其实这里的问题仍然和`Angularjs`的运行机制有关,解决方案如下: - 解决方案1 使用自定义指令的`templateUrl`属性替换当前指令的模板,使用`ng-click`指令来绑定一个点击响应函数,在响应函数中改变`scope.piganation`的值。 - 解决方案2 在手动绑定的监听回调中,修改自定义指令作用域内的变量后,使用`scope.$emit( )`方法通知其父级controller,并在controller中使用`$scope.$on( )`方法监听同名事件,并修改对应的数据模型的值。 - 解决方案3 每当改变自定义指令中的变量值后,调用`scope.$apply()`方法,将directive中的变量值同步至controller的数据模型以及页面。 ### 三.原理和实战总结 #### 3.1 Angularjs中双向数据绑定的基本原理 > Angularjs中的双向数据绑定,是通过一种叫做**"脏循环检查(dirty-checking)"*的机制实现的。 其基本过程是这样的,每当我们使用`ng-model`或`ng-bind`指令将数据模型中的某个变量值和html页面上某个标签的内容联系起来时,Angular就会把这些变量放进一个`WatchCollection`的集合中,并自动帮我们来监控这些变量。每当`WatchCollection`中有变量出现变动时,Angular就会遍历`WatchCollection`来查看是否有其他监控中的变量也被影响,每当有一个变量被影响,Angular都会在遍历后再进行一次遍历,直到某一次遍历后`WatchCollection`中的变量都没有变化,则Angular会认为当前的改动已经稳定了,然后才会将数据模型的变化同步到DOM元素上去,也就实现了数据绑定。 我们可以把`WatchCollection`理解为当前页面的一种抽象,其中包含着页面上所有有可能发生变化的部分。 #### 3.2 双向数据绑定的实践经验 想要在`Angularjs`项目中更加稳定地使用双向数据绑定,笔者的建议是: > 在`Angularjs`项目中,尽可能地使用Angular告诉你的方式去编写所希望实现的功能。 我们可以回顾一下上面在使用双向数据绑定发生异常时的场景: - 使用了原生的定时器(Angular中你应该使用`$interval`,`$timeout`服务) - 用类原生方法(bind)为元素添加事件监听器,并在回调函数中修改了变量的值(Angular中,你应该使用`ng-click`来实现点击事件的监听) - ... 你会发现,每当自己没有按照Angular的方式去编写代码,或者没有按照一个模块设计的初衷去使用它时,就无法确切地得到期望的结果。这是很容易理解的,如果你没有按照Angular要求的方式书写代码,凭什么期望它对你的代码做出100%正确的回应呢?至于上述两种数据绑定中出现问题的解决方案,上文已经有所提及,此处不再赘述。 许多人都听说过*"尽量不要在controller中操作DOM"*这句话,实际上它并不意味着你在controller中操作DOM会导致程序报错,而是在说**如果你同时使用`jQuery`和`Angular`两套系统来管理自己的代码,但又没有按照官方指定的方式来规避它们之间的冲突,那代码很可能会变得不稳定。**想想当年*腾讯电脑管家*和*360安全卫士*将你的电脑卡死的场景,你就明白这样做的结果了。 ### 四. 小结——所谓高手 笔者曾经看过这样一段话,觉得深有感触: > 所谓高手,是指那些`熟知套路`且`创意无穷`的人。而高手之间的较量,归根结底都是`基本功`的比拼。 愿有朝一日,你也能成为高手。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章