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. 在android 6.0（API 23）中，Google已经移除了移除了Apache HttpClient相关的类

    推荐使用HttpUrlConnection,如果要继续使用需要Apache HttpClient,需要在eclipse下libs里添加org.apache.http.legacy.jar,androi ...

  2. 用javascript写Android和iOS naitve应用，实在炫酷。

    关注NativeScript有一段时间了,说好了的三月发第一个Beta版,终于发布了. // declare the extended NativeScriptActivity functionali ...

  3. 阿里云Linux安装软件镜像源

    阿里云Linux安装软件镜像源 阿里云是最近新出的一个镜像源.得益与阿里云的高速发展,这么大的需求,肯定会推出自己的镜像源.阿里云Linux安装镜像源地址:http://mirrors.aliyun. ...

  4. Grpc微服务从零入门

    快速入门 安装 JDK 毫无疑问,要想玩Java,就必须得先装Java JDK,目前公司主要使用的是Oracle JDK 8,安装完成后要配置环境才能正常使用,真蠢,不过也就那么一下下,认了吧.配置方 ...

  5. Web Essentials之Bundling

    返回Web Essentials功能目录 本篇目录 介绍 样例文件 已知行为 介绍 这篇要讲的是Bundling,我看很多人把它翻译为捆绑,如果你喜欢你也可以这么理解,我是不太习惯,我还是喜欢它为bu ...

  6. 打造自己的视频会议系统 GGMeeting（附送源码）

    自从在博客园发布广域网即时通信系统GG(QQ高仿版)以来,结识了很多做IM的朋友,然后我和我的伙伴们也接到了很多与IM相关的项目.相比在发布GG之前难以接到项目的状况相比,现在简直太幸福了,虽然做项目 ...

  7. 在UWP应用中加入Cortana语音指令集

    本文介绍小娜语音指令集的使用场景,如何将UWP应用接入小娜的语音指令集,使用户直接通过小娜启动应用并使用应用中 一些轻量级的功能.文中以必应词典作为实例讲解必应词典UWP版本是如何接入小娜语音功能的. ...

  8. 设计模式之美：Behavioral Patterns（行为型模式）

    行为型模式涉及到算法和对象间职责的分配. 行为模式不仅描述对象或类的模式,还描述它们之间的通信模式. 这些模式刻划了在运行时难以跟踪的复杂的控制流.它们将你的注意力从控制流转移到对象间的联系方式上来. ...

  9. python _、__和__xx__的区别

    python _.__和__xx__的区别 本文为译文,版权属于原作者,在此翻译为中文分享给大家.英文原文地址:Difference between _, __ and __xx__ in Pytho ...

  10. js 倒计时实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...