可能很多刚入行或者刚学习的前端对于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. Noip2016题解&总结

    原文放在我的uoj博客上,既然新开了blog,那就移过来了 玩具谜题(toy) 送分题.没有什么好说的. 直接按照题目的要求模拟即可. 标准的noip式day1T1. #include<cstd ...

  2. HDU - 3664 Permutation Counting

    Discription Given a permutation a1, a2, … aN of {1, 2, …, N}, we define its E-value as the amount of ...

  3. 您也使用托管C++吗？ 【转】

    http://blog.csdn.net/Muf/article/details/656920 转向.NET后,手头上往往仍有旧的模块要重用.也许这些模块是Delphi写的,也许是C/C++写的,或者 ...

  4. 在c++11中你最惊讶的新feature是什么？

    对我来说,我最惊讶竟然把对于多线程的支持加到标准中了.真的想不明确,对于c++这样一种语言.怎么会加进这个东西. 1. 由于各个平台的不同,对于多线程的支持会有很多平台独有的特色.这样c++标准的定义 ...

  5. Odoo(OpenERP)开发实践：通过XML-RPC接口訪问Odoo数据库

    Odoo(OpenERP)server支持通过XML-RPC接口訪问.操作数据库,基于此可实现与其它系统的交互与集成. 本文是使用Java通过XMLRPC接口操作Odoo数据库的简单演示样例.本例引用 ...

  6. sparkSQL1.1入门之十：总结

    回想一下,在前面几章中,就sparkSQL1.1.0基本概念.执行架构.基本操作和有用工具做了基本介绍. 基本概念: SchemaRDD Rule Tree LogicPlan Parser Anal ...

  7. 常见Struts、Hibernate、Spring、J2EE、ibatis、Oracle等开发框架架构图及其简介

    各种系统架构图及其简介 转载请保留出处,不胜人生一场醉汇总. 以下文字和架构图均在本人相关系统设计和架构方案中有所应用. 原文出处:http://space.itpub.net/6517/viewsp ...

  8. ARP协议(1)什么是ARP协议

    这是最近在看<TCP/IP具体解释>系列书总结出来的,之后会陆续把其它协议部分分享出来. 我尽量以简单易读.易懂的方式呈现出来,可是,因为文笔和水平有限.有些地方或许存在描写叙述上的不足或 ...

  9. Laravel建站04--建立后台文章管理

    路由配置 Route::group(['middleware' => 'auth', 'namespace' => 'Admin', 'prefix' => 'admin'], fu ...

  10. HTML5开发移动web应用—JQuery Mobile(1)

    JQuery Mobile是一个简单易用的web移动app开发框架.使用它就像使用jQuery一样,引入必要的文件就可以. 最基础的jQuery Mobile文件的结构代码例如以下: <body ...