深入解析AngularJS中$scope.$apply()方法实现数据双向绑定与脏检查机制

$apply()函数可以从Angular框架的外部让表达式在Angular上下文内部执行。例如&＃xff0c;假设你实现了一个setTimeout()或者使用第三方库并且想让事件运行在Angular上下文内部时&＃xff0c;就必须使用$apply()。

简而言之&＃xff0c;使用$scope.$apply()时可以从外部进入上下文。如果在事件被触发时调用$apply()&＃xff0c;就会使用Angular事件循环来运行它。如果没有调用$apply()&＃xff0c;就不会在事件循环内执行这个函数&＃xff0c;而它会运行在Angular上下文外部。

何时使用$apply&＃xff1f;

通常可以依赖于Angular提供的可用于视图中的任意指令来调用$apply()。所有ng-[event]。

指令&＃xff08;比如ng-click、ng-keypress&＃xff09;都会调用$apply()。

此外还可以依赖于一系列Angular内置的服务来调用$digest()。比如$http服务会在XHR请求完成并触发更新返回值&＃xff08;promise&＃xff09;之后调用$apply()。

无论何时我们手动处理事件&＃xff0c;使用第三方框架&＃xff08;比如jQuery、Facebook API&＃xff09;&＃xff0c;或者调用setTimeout()&＃xff0c;都可以使用$apply()函数让Angular返回$digest循环。

当我们将jQuery和Angular集成在一起时&＃xff08;这通常被视为一个肮脏的行为&＃xff09;&＃xff0c;就需要使用$apply()&＃xff0c;因为Angular不会察觉到执行在Angular上下文外部的事件。例如&＃xff0c;在使用jQuery时&＃xff08;比如click事件&＃xff09;&＃xff0c;就需要使用$apply()将来自jQuery的事件传递到Angular应用中。

如何使用$apply&＃xff1f;

在下面这段代码中&＃xff0c;点击【按钮一】可以看到我们理想中的效果&＃xff0c;这一点确定无疑&＃xff1b;但是点击【按钮二】&＃xff0c;如果没有$scope.$apply()这段代码&＃xff0c;就执行不下去。

以上就是$apply的作用。