1.作用域

基于作用域的事件传播

作用域可以像DOM节点一样，进行事件的传播。主要是有两个方法：

  • broadcasted ：从父级作用域广播至子级 scope
  • emitted ：从子级作用域往上发射到父级作用域
  1. <!doctype html>
  2. <html ng-app>
  3. <head>
  4.     <script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
  5. </head>
  6. <body>
  7.     <div ng-controller="EventController">
  8.         Root作用域<tt>MyEvent</tt> count:{{count}}
  9.         <ul>
  10.             <li ng-repeat="i in [1]" ng-controller="EventController">
  11.                 <button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>
  12.                 <button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button>
  13.                 <br>
  14.                 Middle作用域<tt>MyEvent</tt> count: {{count}}
  15.                 <ul>
  16.                     <li ng-repeat="item in [1, 2]" ng-controller="EventController">
  17.                         Leaf作用域<tt>MyEvent</tt> count: {{count}}
  18.                     </li>
  19.                 </ul>
  20.             </li>
  21.         </ul>
  22.     </div>
  23.     <script type="text/javascript">
  24.         function EventController($scope) {
  25.             $scope.count = 0;
  26.             $scope.$on('MyEvent', function() {
  27.                 $scope.count++;
  28.             });
  29.         }
  30.     </script>
  31. </body>
  32. </html>

angularJS随笔的更多相关文章

  1. AngularJs的$http使用随笔

    AngularJs的$http服务是Angularjs自带的核心服务之一,用来与HTTP远程服务器交互. 关于$http使用,我体会的一下几点注意: 1.在使用是报“Uncaught Referenc ...

  2. AngularJS 学习随笔（一）

    AngularJS 初始化加载流程: 1:浏览器载入HTML,然后把它解析成DOM 2:浏览器载入Angular.JS 脚本 3:AngularJS 等到DOMContentLoaded时间触发 4: ...

  3. AngularJS(1)随笔

    ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者". ng-model 指令把输入域的值绑定到应用程序变量 na ...

  4. AngularJs 第三节随笔

    利用$scope暴露模型数据 利用向控制器传递$scope对象的机制,可以把模型数据暴露给试图.在你的应用中可能还有其他数据,但是只有通过$scope 触及这些数据,angular才会把它当成数据模型 ...

  5. 随笔编号-04 AngularJS 相关小问题解决方案合集

    1  解决 Select选择框遍历时,出现一个空白选项: <select style="width: 20%;margin-left: 5px;height: 31px;" ...

  6. AngularJS 系列 01 - HelloWorld和数据绑定

    目录导读: AngularJS 系列 学习笔记 目录篇 前言: 好记性不如烂键盘,随笔就是随手笔记,希望以后有用. 本篇目录: 1. Hello World 2. AngularJS中的数据绑定 3. ...

  7. requirejs按需加载angularjs文件

    之前分享了一篇用ocLazyLoad实现按需加载angular js文件的博客.本来当时想会使用一种方法就行了.可最近刚好有时间,在网上查找了一下requirejs实现angular js文件按需加载 ...

  8. AngularJs的UI组件ui-Bootstrap分享（二）——Collapse

    Collapse折叠控件使用uib-collapse指令 <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" xml ...

  9. Angularjs Controller 间通信机制

    在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...

随机推荐

  1. IndexedDB demo showcase

    var dbGlobals = new Object(); dbGlobals.db = null; dbGlobals.description = "This database is us ...

  2. 如何从 Xcode 控制台输出 JavaScript 的 log？

    调试 UIWebView 中的 JavaScript 一直以来都是很痛苦的一件事.通常我们会通过下面的方法调试 HTML 和 JavaScript. 1.第一种,使用桌面浏览器调试.大多数现代浏览器都 ...

  3. Steady Cow Assignment

    poj3189:http://poj.org/problem?id=3189 题意:这一题的题意.我看了很长时间才弄懂.就是给你n头牛,m个牛棚,每个牛对每一个牛棚会有一个满值,第i行第j个数表示的是 ...

  4. C语言结构体的对齐原则

    Q:关于结构体的对齐,到底遵循什么原则?A:首先先不讨论结构体按多少字节对齐,先看看只以1字节对齐的情况: #include <stdio.h> #include <string.h ...

  5. 3.2 java中堆栈(stack)和堆(heap)(还在问静态变量放哪里，局部变量放哪里，静态区在哪里.....进来)

    (1)内存分配的策略 按照编译原理的观点,程序运行时的内存分配有三种策略,分别是静态的,栈式的,和堆式的. 静态存储分配是指在编译时就能确定每个数据目标在运行时刻的存储空间需求,因而在编 译时就可以给 ...

  6. hadoop-2.0.0-mr1-cdh4.2.0源码编译总结

    准备编译hadoop-2.0.0-mr1-cdh4.2.0的同学们要谨慎了.首先看一下这篇文章: Hadoop作业提交多种方案 http://www.blogjava.net/dragonHadoop ...

  7. Duplex Service in WCF（CodeProject上的）

    Duplex Service in WCF In WCF, a service can call back to its clients. That is to say that, at the ti ...

  8. mysql优化, 删除数据后物理空间未释放(转载)

    mysql优化, 删除数据后物理空间未释放(转载) OPTIMIZE TABLE 当您的库中删除了大量的数据后,您可能会发现数据文件尺寸并没有减小.这是因为删除操作后在数据文件中留下碎片所致.OPTI ...

  9. [LeetCode#252] Meeting Rooms

    Problem: Given an array of meeting time intervals consisting of start and end times [[s1,e1],[s2,e2] ...

  10. git 添加忽略文件

    使用github for windows客户端添加.gitignore文件:   如下图所示,在github客户端可以看到未提交的更改列表 随便选中一个文件,右链,选择ignore file. 然后会 ...