$apply()函数可以从Angular框架的外部让表达式在Angular上下文内部执行。例如,假设你实现了一个setTimeout()或者使用第三方库并且想让事件运行在Angular上下文内部时,就必须使用$apply()。
简而言之,使用$scope.$apply()时可以从外部进入上下文。如果在事件被触发时调用$apply(),就会使用Angular事件循环来运行它。如果没有调用$apply(),就不会在事件循环内执行这个函数,而它会运行在Angular上下文外部。
何时使用$apply?
通常可以依赖于Angular提供的可用于视图中的任意指令来调用$apply()。所有ng-[event]。
指令(比如ng-click、ng-keypress)都会调用$apply()。
此外还可以依赖于一系列Angular内置的服务来调用$digest()。比如$http服务会在XHR请求完成并触发更新返回值(promise)之后调用$apply()。
无论何时我们手动处理事件,使用第三方框架(比如jQuery、Facebook API),或者调用setTimeout(),都可以使用$apply()函数让Angular返回$digest循环。
当我们将jQuery和Angular集成在一起时(这通常被视为一个肮脏的行为),就需要使用$apply(),因为Angular不会察觉到执行在Angular上下文外部的事件。例如,在使用jQuery时(比如click事件),就需要使用$apply()将来自jQuery的事件传递到Angular应用中。
如何使用$apply?
在下面这段代码中,点击【按钮一】可以看到我们理想中的效果,这一点确定无疑;但是点击【按钮二】,如果没有$scope.$apply()这段代码,就执行不下去。
04 | <meta charset= "UTF-8" > |
05 | <title>$scope.$apply()进行数据脏检查</title> |
06 | <style type = "text/css" > |
07 | .ng-cloak{display:none;} |
10 | <body ng-app= "app" ng-controller= "ctr" ng-cloak class= "ng-clock" > |
12 | <button ng-click= "func();" >按钮一</button> |
14 | <button id = "btn" >按钮二</button> |
17 | <script type = "text/javascript" src= "http://www.zymseo.com/js/demo.js" ></script> |
18 | <script type = "text/javascript" src= "http://www.zymseo.com/js/angular.min.js" ></script> |
19 | <script type = "text/javascript" > |
20 | var m = angular.module( 'app' , []); |
21 | m.controller( 'ctr' , [ '$scope' , function ($scope){ |
23 | /*$scope.func = function (){ |
24 | $scope.name = '赵一鸣个人技术博客' ; |
26 | $( '#btn' ).click( function (){ |
27 | $scope.name = '赵一鸣AngularJs学习笔记' ; |
|
以上就是$apply的作用。