AngularJS scope 作用域的问题

Posted 2021-12-23 singular

这两天写的项目用到一个古老的前端框架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去把整个函数包住来监视模型变量的变化，从而维护双向绑定。