AngularJs使用$scope.$apply()进行数据脏检查

最新推荐文章于 2022-09-13 16:13:27 发布

K'illCode

最新推荐文章于 2022-09-13 16:13:27 发布

阅读量439

点赞数

分类专栏： angularJS 文章标签： angularJs

本文链接：https://blog.csdn.net/Dome_/article/details/79277534

版权

angularJS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

$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()这段代码，就执行不下去。

 
       01<!DOCTYPE html>
 
       02<html lang="en">
 
       03<head>
 
       04    <meta charset="UTF-8">
 
       05    <title>$scope.$apply()进行数据脏检查</title>
 
       06    <style type="text/css">
 
       07        .ng-cloak{display:none;}
 
       08    </style>
 
       09</head>
 
       10<body ng-app="app" ng-controller="ctr" ng-cloak class="ng-clock">
 
       11    {{name}}
 
       12    <button ng-click="func();">按钮一</button>
 
       13    <hr>
 
       14    <button id="btn">按钮二</button>
 
       15</body>
 
       16</html>
 
       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){
 
       22        $scope.name = '赵一鸣';
 
       23        /*$scope.func = function(){
 
       24            $scope.name = '赵一鸣个人技术博客';
 
       25        }*/
 
       26        $('#btn').click(function(){
 
       27            $scope.name = '赵一鸣AngularJs学习笔记';
 
       28            $scope.$apply();
 
       29        });
 
       30    }]);
 
       31</script>

以上就是$apply的作用。