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. memset 究竟在做什么？

    我要 一字节一字节 地 memory set

  2. 一个好用的C#类型转换器

    public static object ChangeType(object value, Type targetType) { if (targetType.IsGenericType && ...

  3. AJAX--XMLHttpRequest Object 知识整理

    1.创建XMLHttpRequest对象 variable = new XMLHttpRequest() variable = new ActiveXObject('Microsoft.XMLHTTP ...

  4. String 归档

    1.古罗马皇帝凯撒在打仗时曾经使用过以下方法加密军事情报:,请编写一个程序,使用上述算法加密或解密用户输入的英文字串要求设计思想.程序流程图.源代码.结果截图. 设计思想: 1)输入一个字符串str( ...

  5. 改变html中鼠标形状

    要修改的属性是: style=”cursor:default” 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 pointer:是手型. crosshair:是十字 ...

  6. Attic 0.8.1 发布，备份程序

    Attic 0.8.1 修复了昨天刚发布的 Attic 0.8 的一个段错误. Attic 是一个可以保证文件不重复的备份程序.Attic 的主要目标是提供一个高效和安全的方法来备份数据.重复数据删除 ...

  7. 让Entity Framework启动不再效验__MigrationHistory表

    Entity Framework中DbContext首次加载OnModelCreating会检查__MigrationHistory表,作为使用Code Frist编程模式,而实际先有数据库时,这种检 ...

  8. Expression Tree 扩展MVC中的 HtmlHelper 和 UrlHelper

    表达式树是LINQ To everything 的基础,同时各种类库的Fluent API也 大量使用了Expression Tree.还记得我在不懂expression tree时,各种眼花缭乱的A ...

  9. C#中的线程三 (结合ProgressBar学习Control.BeginInvoke)

    C#中的线程三(结合ProgressBar学习Control.BeginInvoke) 本篇继上篇转载的关于Control.BeginInvoke的论述之后,再结合一个实例来说明Cotrol.Begi ...

  10. 《你必须知道的.NET》读书笔记一：小OO有大智慧

    此篇已收录至<你必须知道的.Net>读书笔记目录贴,点击访问该目录可以获取更多内容. 一.对象  (1)出生:系统首先会在内存中分配一定的存储空间,然后初始化其附加成员,调用构造函数执行初 ...