可能很多刚入行或者刚学习的前端对于AngularJs中的一些事件或者概念感觉不理解或者没有思路,今天让我们一起来剖析一下AngularJs中的一些事件。

AngularJs中对于的监听事件会用到一个scope函数$watch,它包含了三个参数,首先我们在概念上来了解一下：

$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。

$watch(watchExpression, listener, objectEquality);

每个参数的说明如下：

watchExpression（必须）：监听的对象，它可以是一个string，将被计算为表达式 ,或函数如function(){return $scope.name}。

listener:当watchExpression（监听对象）变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)

objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它。

我写了一个小例子，可能会让大家更好的了解监听模型变化的过程,以下部分是html代码：

<!doctype html>

<html ng-app="exampleApp">

<head>

    <meta charset="utf-8">

    <title></title>

    <link href="../css/bootstrap.css" rel="stylesheet">  //导入了本地bootstrap的框架

</head>

<body ng-controller = "simpleCtrl">

<div class="container">

    <div class="well">

        <div class="form-group">

            <input class="form-control" ng-model="name" type="text">

        </div>

    </div>

</div>

</body>

</html>

然后导入本地的AngularJs框架的文件，javaScript代码如下：

<script src="../angular.min.js"></script>    //导入本地AngularJs文件

    <script>

        angular.module("exampleApp", [])

                .controller("simpleCtrl", function ($scope, $rootScope) {

                    $scope.count = 0;

                    $scope.name = '';

                    $scope.$watch('name', function(){  //监听数据模型发生的变化

                        console.log($scope.count++);

                    });

                });

    </script>

代码运行后的结果为

当用户与输入框中的内容发生交互事件时监听事件被触发（无论是增加还是删除）,运行结果如下：

接下来为大家分享下脏循环，Angular会运行一个函数$digest来检查scope模型中的数据是否发生了变化。 在$digest循环中，watchers会被触发。当一个watcher被触发时，AngularJS会检测它所监听的scope模型，如果监听对象发生了变化那么关联到该watcher的回调函数就会被调用。 这种方法叫做脏检查。

在angular程序初始化时，会将绑定对象的属性添加为监听对象（watcher），也就是说一个$scope对象绑定了N个属性，就会添加N个watcher。 angular什么时候去脏检查呢？angular所定义的方法中都会触发$digest事件，比如：controller初始化的时候，所有以ng-开头的指令执行后，都会触发脏检查 用户与视图发生交互行为以后会触发脏检查。

调用$digest方法： $scope.$digest();

但是这里就又要牵扯到另一个函数，因为AngularJS并不直接调用$digest()，而是调用$scope.$apply()，$apply方法就是将$digest方法包装了一层，会调用$rootScope.$digest()。因此，一轮$digest循环在$rootScope开始，随后会访问到所有的children scope中的watchers。 $apply()方法接受一个可选参数，可以是string，string将被看作表达式并计算结果，也可以是函数。

当接受function作为参数，会执行该function并且触发一轮$digest循环。 不接受任何参数，触发一轮$digest循环会，检查该$scope里的所有监听的属性。 如果你在AngularJS上下文之外的任何地方修改了model，那么你就需要通过手动调用$apply()来通知AngularJS。

这里有个小例子效果图如下：

因为这里设置了延时触发，所以一段时间过后：

下面是实现代码部分，html代码如下：

<!DOCTYPE html>

<html lang="en" ng-app="myApp">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body ng-controller="MesCtrl">

  {{message}}

</body>

</html>

javaScript代码如下：

<script src="angular.min.js"></script>

<script>

    angular.module("myApp",[]).controller("MesCtrl", function ($scope) {

        $scope.message = "原来的信息";

        $scope.getMessage = function(){

            setTimeout(function(){

                $scope.$apply(function(){

                    $scope.message = "两秒钟之后更新";

                    console.log('message:' +$scope.message);

//                $scope.$apply();   第二种调用方法

                })

            },2000)

        }

        $scope.getMessage();

    });

</script>

以上就是我所理解的AngularJs中的部分内容，希望大家有什么质疑或见解可以放在评论栏，大家吃好喝好，回见。

关于AngularJs中监听事件及脏循环的理解的更多相关文章

  1. Vue 为什么在 HTML 中监听事件?

    为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念.不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑 ...

  2. Android 监听事件

    安卓中监听事件的三种实现方式 1.匿名内部类的实现方式 2.独立类的实现方式 3.实现接口方式实现 一.匿名内部类的实现 1.首先声明一个Button //声明一个Button private But ...

  3. vue v-on监听事件

    在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的. 在vue.js中监听事件是通过v-on指令来实现的,先看一下 ...

  4. Android中Button的五种监听事件

    简单聊一下Android中Button的五种监听事件: 1.在布局文件中为button添加onClick属性,Activity实现其方法2.匿名内部类作为事件监听器类3.内部类作为监听器4.Activ ...

  5. 在Javascript中监听flash事件(转)

    在Javascript中监听flash事件,其实有两种做法: 1.在特定的环境下(例如专门制作的flash),大家约定一个全局函数,然后在flash的事件中用ExternalInterface.cal ...

  6. Fragment中监听onKey事件，没你想象的那么难。

    项目中越来越多的用到Fragment,在用Fragment取代TabHost的时候遇到了一个问题,我们都知道,TabHost的Tab为Activity实例,有OnKey事件,但是Fragment中没有 ...

  7. jquery中，使用append增加元素时，该元素的绑定监听事件失效

    举例:如果在一个<div id="resultArea"></div>中,通过append添加一个id="checkOutTip"的文本 ...

  8. wemall app商城源码Fragment中监听onKey事件

    wemall-mobile是基于WeMall的android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享android开发Fragment中监听onK ...

  9. 在Activity，Service，Window中监听Home键和返回键的一些思考，如何把事件传递出来的做法！

    在Activity,Service,Window中监听Home键和返回键的一些思考,如何把事件传递出来的做法! 其实像按键的监听,我相信很多人都很熟练了,我肯定也不会说这些基础的东西,所以,前期,还是 ...

随机推荐

  1. python中执行shell命令的几个方法

    1.os.system() a=os.system("df -hT | awk 'NR==3{print $(NF-1)}'") 该命令会在页面上打印输出结果,但变量不会保留结果, ...

  2. Spring配置项之<aop:aspectj-autoproxy />

    通过配置织入@Aspectj切面 虽然可以通过编程的方式织入切面,但是一般情况下,我们还是使用spring的配置自动完成创建代理织入切面的工作. 通过aop命名空间的<aop:aspectj-a ...

  3. javascript好文---深入理解定位父级offsetParent及偏移大小

    前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWid ...

  4. UITableView 滚动时使用reloaddata出现 crash'-[__NSCFArray objectAtIndex:]: index (1) beyond bounds (0)' Crash

    例子: - (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)in ...

  5. Android Base64转图片

    最近做一个项目里面有关于图片展示的需求,但是任性的后台跟我说没有图片服务器,只能给我base64让我自己转成图片,好吧,我忍,转就转吧.. 首先第一步咱还是谦虚点上百度查查别人咋转的,结果似乎各位码友 ...

  6. iOS -- 设置label的自适应

    - (void)AutoLabel { //准备工作 self.font = [UIFont systemFontOfSize:]; self.textColor = [UIColor whiteCo ...

  7. dubbo开发者指南

    开发者指南 参与 流程 任务 版本管理 源码构建 框架设计 整体设计 模块分包 依赖关系 调用链 暴露服务时序 引用服务时序 领域模型 基本原则 扩展点加载 扩展点配置 扩展点自动包装 扩展点自动装配 ...

  8. 树莓派 Zero作为飞控图传

    前言 原创文章,转载引用务必注明链接,水平有限,如有疏漏,欢迎指正. 本文使用Markdown写成,为获得更好的阅读体验和正常的链接.图片显示,请访问我的博客原文: http://www.cnblog ...

  9. ios 清理缓存（EGO）

    一段清理缓存的代码例如以下: dispatch_async( dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT,) , ^{ NSSt ...

  10. CString和string头文件

    在使用了MFC库的工程中CString可以直接使用,在没有使用MFC库的工程中加入#include <atlstr.h> 要使用STL里的string,要加入#include <st ...