1.作用域

基于作用域的事件传播

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

  • broadcasted ：从父级作用域广播至子级 scope
  • emitted ：从子级作用域往上发射到父级作用域
<!doctype html>

<html ng-app>

<head>

    <script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>

</head>

<body>

    <div ng-controller="EventController">

        Root作用域<tt>MyEvent</tt> count:{{count}}

        <ul>

            <li ng-repeat="i in [1]" ng-controller="EventController">

                <button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>

                <button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button>

                <br>

                Middle作用域<tt>MyEvent</tt> count: {{count}}

                <ul>

                    <li ng-repeat="item in [1, 2]" ng-controller="EventController">

                        Leaf作用域<tt>MyEvent</tt> count: {{count}}

                    </li>

                </ul>

            </li>

        </ul>

    </div>

    <script type="text/javascript">

        function EventController($scope) {

            $scope.count = 0;

            $scope.$on('MyEvent', function() {

                $scope.count++;

            });

        }

    </script>

</body>

</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. [BZOJ 1025] [SCOI2009] 游戏 【DP】

    题目链接:BZOJ - 1025 题目分析 显然的是,题目所要求的是所有置换的每个循环节长度最小公倍数的可能的种类数. 一个置换,可以看成是一个有向图,每个点的出度和入度都是1,这样整个图就是由若干个 ...

  2. C语言嵌入式系统编程修炼之三：内存操作

    数据指针 在嵌入式系统的编程中,常常要求在特定的内存单元读写内容,汇编有对应的MOV指令,而除C/C++以外的其它编程语言基本没有直接访问绝对地址的能力.在嵌入式系统的实际调试中,多借助C语言指针所具 ...

  3. Copying Linked Lists with Random Pointers

    Copying Linked Lists with Random Pointers 两个方法:方法一: 1.不考虑随机指针的情况下复制链表: 2.在复制过程中建立一个以原链表节点地址为key,相应的复 ...

  4. Android开源项目发现----其他特殊效果篇（持续更新）

    1. Crouton 丰富样式的Toast 允许alert.comfirm.info样式及点击消失样式,允许设置Toast显示时间,允许自定义View. 项目地址:https://github.com ...

  5. BZOJ2342: [Shoi2011]双倍回文

    2342: [Shoi2011]双倍回文 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 923  Solved: 317[Submit][Status ...

  6. 【转】在ubuntu环境下搭建svn server遇到的一些问题

    原文网址:http://www.cnblogs.com/pcchinadreamfly/archive/2012/11/24/2786046.html 前段时间在ubuntu 12.04lts上倒腾了 ...

  7. unity3d 制造自己的水体water effect（一）

    first,I wish you a happy new year, and study in spring festival’s eve means you are hardworking,haha ...

  8. 【狼】unity3d point light 个数限制更改

      unity默认的pointlight个数为2个,多加的话先加的就没有效果, 具体更改方式如下: Edit -> Project Settings -> Quality-> Ren ...

  9. xrdp远程 & watchdog 启用与测试 & WebRTC

    sudo apt-get install xrdp sudo apt-get install vnc4server tightvncserver echo "xfce4-session&qu ...

  10. 大牛博客！Spark / Hadoop / Kafka / HBase / Storm

    在这里,非常感谢下面的著名大牛们,一路的帮助和学习,给予了我很大的动力! 有了Hadoop,再次有了Spark,一次又一次,一晚又一晚的努力相伴! HBase简介(很好的梳理资料) 1. 博客主页:h ...