angularJS的事件不像js一样，会默认有冒泡和捕获，还有angularJS之间的同名控制器之间，也只是同名，

不会让他们关联起来，就是这个名字的控制器的数据的改变不会影响到另一个同名的控制器。

但同名控制器之间可以使用的事件处理，让其有冒泡和捕获的机制。

如：

<!DOCTYPE html>

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

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="angularjs-v1.5.9.js"></script>

</head>

<body>

<!-- $broadcast()捕获 -->

<div ng-controller="myCon" ng-click="$broadcast('change')">

{{count}}

    <div ng-controller="myCon" >

        {{count}}

        <!-- $emit()冒泡 -->

        <div ng-controller="myCon" ng-click="$emit('change')">

            {{count}}

        </div>

    </div>

</div>

    <script>

        var myApp=angular.module("myApp",[])

        .controller("myCon",function($scope){

            $scope.count=0;

            $scope.$on("change",function(){

                $scope.count++;

            })

        })

    </script>

</body>

</html>

$on()给就像addEventListener()。

补充动画那块：

因为angularJS的动画插件不是添加删除class,就是添加删除DOM，所以使用animate的css动画库，应该更加简单实现动画效果。

ng-show;ng-if;

angularJS之事件处理的更多相关文章

  1. AngularJS学习--- 事件处理(Event Handlers) ng-click操作 step 10

    本文主要通过介绍ng-click方法来对angularjs中的事件处理方法做个了解. 1.切换目录 git checkout step- npm start 2.效果 点击右边的小图片,那么左边框中将 ...

  2. AngularJS 脏检查深入分析

    写在开头 关于Angular脏检查,之前没有仔细学习,只是旁听道说,Angular 会定时的进行周期性数据检查,将前台和后台数据进行比较,所以非常损耗性能. 这是大错而特错的.我甚至在新浪前端面试的时 ...

  3. 基于 Angularjs&Node.js 云编辑器架构设计及开发实践

    基于 Angularjs&Node.js 云编辑器架构设计及开发实践 一.产品背景 二.总体架构 1. 前端架构 a.前端层次 b.核心基础模块设计 c.业务模块设计 2. Node.js端设 ...

  4. angularjs 的笔记

    angular.copy()深拷贝 angular提供了一个可以复制对象的api--copy(source,destination),它会对source对象执行深拷贝. 使用时需要注意下面几点: 如果 ...

  5. 使用 AngularJS & NodeJS 实现基于token 的认证应用（转）

    认证是任何 web 应用中不可或缺的一部分.在这个教程中,我们会讨论基于 token 的认证系统以及它和传统的登录系统的不同.这篇教程的末尾,你会看到一个使用 AngularJS 和 NodeJS 构 ...

  6. AngularJS快速入门01-基础

    记得第一次听说AngularJS这项很赞的Web的前端技术,那时还是2014年,年中时我们我的一个大牛兄弟当时去面试时,被问到了是否熟悉该技术,当时他了解和使用的技术比较多.我们询问他面试情况时,他给 ...

  7. AngularJS的学习--$on、$emit和$broadcast的使用

    AngularJS中的作用域有一个非常有层次和嵌套分明的结构.其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承自这个$ro ...

  8. angularjs学习总结 详细教程（转载）

    1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...

  9. HTML+AngularJS+Groovy如何实现登录功能

    AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS核心特性有:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等.AngularJS认为声明 ...

随机推荐

  1. MAT-Java内存分析工具

    对Mat工具的详细介绍,引用博文:http://my.oschina.net/biezhi/blog/286223 下载地址:http://www.eclipse.org/mat/downloads. ...

  2. SA: 情感分析资源（Corpus、Dictionary）

    先主要摘自一篇中文Survey,http://wenku.baidu.com/view/0c33af946bec0975f465e277.html   4.2 情感分析的资源建设 4.2.1 情感分析 ...

  3. C# GetHashCode与Equals在HashTable表查找时的关系

    using System; using System.Collections.Generic; using System.Text; using Microsoft.Win32; using Syst ...

  4. ubuntu10.04下修改mysql的datadir的问题

    ubuntu10.04下修改mysql的datadir的问题 转自:http://blog.sina.com.cn/s/blog_4152a9f50100mq5i.html 昨天由于服务器空间告紧,需 ...

  5. c#.net中参数修饰符ref,out ,params解析

    params ============================================================================================= ...

  6. [转]mysql drop、truncate和delete比较

    一.drop table tb drop将表格直接删除,没有办法找回. 立刻释放磁盘空间 ,不管是 Innodb和MyISAM . 二.truncate (table) tb 该命令可以清空一个表里的 ...

  7. Oracle Created Database Users: Password, Usage and Files References (文档 ID 160861.1)

    This document is no longer actively maintained, for info on specific (new) users in recent product e ...

  8. Win10 无法完全关机问题

    Win10是重新安装的.开机运行时间长了或者跑的东西多了.关机,键盘灯还是亮的,要强制按电源键关机才行. 问题解决:从网上搜以为是显卡驱动问题,上官网更新最新驱动,结果还是关不了机.偶然间搜到是Int ...

  9. ubuntu常用配置

    安装文件共享服务 0.更改本机主机名,修改 /etc/hostname文件(ubuntu默认都是ubuntu) 1.安装 #sudo apt-get install samba samba-commo ...

  10. Asp.net web form url route使用总结

    asp.net web form 使用URL路由 注不是mvc中的路由 一.前台控件使用路由,通过表达式生成url地址,注意给路由参数赋值,防止使用了其他路由表达式值方式1:<asp:Hyper ...