这两天写的项目用到一个古老的前端框架AngularJS, 然后遇到了一个神奇的问题,对于我这种前端小白来说,也是花了大半天才解决。还是记录一下吧。
问题背景:AngularJS模型提供一个$scope变量,可以用来实现数据的双向绑定。
问题描述: 在使用了JQuery提供的fileupload文件上传框架后,想在文件成功上传后的回调函数done中改变scope变量的值,但是发现直接修改并没有成功。断点调试的时候发现在回调函数里
又确实是可以访问到,这就很神奇了。
原理和解决方法:Angular为我们提供了一些接口来绑定JavaScript代码与数据,Angular 采用任何数据可以用来绑定,并在JavaScript的末位运行并进行,并检查数据更新。
进行数据变化检查的实际上是$digest函数,但是通常我们不是直接使用$digest函数,而是使用$apply,$apply函数接收表达式或者函数作为参数后调用$digest来更新监控器。
那我们究竟要什么时候来调用$apply呢,实际上,Angular几乎在所有提供的代码中添加了$apply,如ng-click,初始controller,$http的回调操作,在这,你并不需要亲自调用 $apply,而且重复的调用会引起错误。因此,当你运行了一个新阶段,并且这部分并不属于Angular库的情况下才需要使用$apply。这有一段关于setTimeout的代码,在经过了2000毫秒的延迟之后,代码进入执行了一个新的阶段,但是Angular并不知道数据有更新,因此更新并不会被显示。 选自 https://www.jb51.net/article/119643.htm
总结一下,就是调用了除AngularJS之外的库时,需要用$apply去把整个函数包住来监视模型变量的变化,从而维护双向绑定。