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. gem sources --add http://ruby.taobao.org/

    gem sources  gem sources  gem sources --remove http://ruby.taobao.org/ gem sources --add http://ruby ...

  2. Oracle/SQL 修改字段类型和长度

    标准SQL修改字段类型和长度语句: ALTER TABLE tableName modify column columnName 类型;例如Mysql的修改字段类型语句:alter table tes ...

  3. TypeError: matchExpr[type].exec is not a function

    遇到了这个问题,很久没找到答案,后来使用了万能的google,貌似也没找到答案. 详细描述下: 通过使用 $(".select")来选择jqeury对象,没问题. 通过$(&quo ...

  4. 每天记一些php函数，jQuery函数和linux命令（三）

    简介:学习完了php和jQuery之后,对函数的记忆不到位,导致很多函数没记住,所以为了促进自己的记忆,每天花一点时间来写这个博客. 时间:2016-12-21   地点:太原    天气:雨夹雪 一 ...

  5. 命令行解析Crash文件

    做了快两年的开发了,没有写过博客,最近公司app上架,程序崩溃被拒绝了,可是给的crash文件,又看不出哪里的问题,网上各种搜,终于找到了解决的办法,想想还是写个博客吧,希望给哪些也遇到这类问题的朋友 ...

  6. XAF Spreadsheet property Editor

    https://www.devexpress.com/Support/Center/Question/Details/T371232

  7. 4.CXF所支持的数据类型

    前言:jdk提供了webService,但为什么使用jdk来开发webService相对少呢? 一个重要原因就是jdk支持的数据类型相对不足,例如Map就不为jdk所支持! CXF支持的数据类型: 基 ...

  8. 是uibutton跟tableviewcell同步使用一个bug

    这个问题是uibutton跟tableviewcell同步使用一个bug,不关delay一点毛事,证据就是点击事件没问题,so,搜到一个方法解决了这个问题.uibutton分类symbian2+ios ...

  9. redis/php redis扩展 安装

    作者:silenceper 日期:2013-10-03 原文地址: http://silenceper.com/archives/952.html 我是在CentOS 6.3 中进行的. 使用到的软件 ...

  10. zoj 3725 - Painting Storages(动归)

    题目要求找到至少存在m个连续被染成红色的情况,相对应的,我们求至多有m-1个连续的被染成红色的情况数目,然后用总的数目将其减去是更容易的做法. 用dp来找满足条件的情况数目,, 状态:dp[i][0] ...