可能很多刚入行或者刚学习的前端对于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. 转载：P2P技术原理及应用(1)

    转帖allen303allen的空间 作 者:金海 廖小飞 摘要:对等网络(P2P)有3种主要的组织结构:分布式哈希表(DHT)结构.树形结构.网状结构.P2P技术已 经延伸到几乎所有的网络应用领域, ...

  2. [功能集锦] 001 - java下载文件

    @RequestMapping("/downloadxls.action") public void downloadxls(HttpServletRequest request, ...

  3. JAVA算法总结_时间复杂度_Demo

    JAVA面试中经常问到排序算法问题,本人结合网络上一些资源整理了编写一下常用的Demo,并附带运行结果,希望能帮助到大家. /** * @Title: 冒泡排序 * @Description: 将数组 ...

  4. 转:PHP 生成复杂JSON格式 简单快速方法

    PHP 生成JSON 格式主要使用json_encode()函数.这个函数的输入参数支持PHP数组和对象类型. 查阅网上的例子通常都是使用数组的,也有个别使用对象生成.但实际项目中,我们要生成的JSO ...

  5. DELPHI跨平台编译开关

    DELPHI跨平台编译开关 DELPHI 现在是跨平台的开发工具,已经不仅仅针对WINDOWS OS. 跨平台的时候,一些WINDOWS特有的API或语法是不能用的,必须使用跨平台的新语法,要用编译开 ...

  6. httplib 和 httplib2区别之 gzip解压

    HTTP请求头Accept-encoding: gzip信息告诉服务器,如果它有任何新数据要发送给时,请以压缩的格式发送.如果服务器支持压缩,它将返回由 gzip 压缩的数据并且使用Content-e ...

  7. 8.【nuxt起步】-vue组件之间数据交互

    那么现在问题来了,我现在是在index.vue获取了服务端的数据,怎么传值到maincontent.vue?当然你也可以把获取数据放在maincontent.vue,但假如有些数据同时在header, ...

  8. Python基础语法02-运算符

    Python 运算符 算术运算符 比较(关系)运算符 赋值运算符 逻辑运算符 位运算符 成员运算符 身份运算符 运算符优先级 Python运算符优先级 以下表格列出了从最高到最低优先级的所有运算符: ...

  9. Git学习0基础篇（下）

    server上的 Git - 协议 Git能够使用四种基本的协议传输资料:本地协议(Local).HTTP 协议.SSH(Secure Shell) 协议以及 Git 协议.眼下使用最普及的是 SSH ...

  10. 【Python】输出程序运行的百分比

    对于一些大型的Python程序.我们须要在命令行输出其百分比,显得更加友好,以免被人误会程序陷入死循环.假死的窗口. 关键是利用到不换行的输出符\r,\r的输出.将直接覆盖掉此行的内容. 比方例如以下 ...