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. Contest 20140914 Mushroom写情书 字符串雙hash 後綴數組

    0111:Mushroom写情书 查看 提交 统计 提问 总时间限制:  10000ms 内存限制:  256000kB 描述 有一天,Mushroom准备向他的GF表白,为了增加表白成功率,Mush ...

  2. DestroyWindow

    假设自己通过new创建了一个窗口对象pWnd,然后pWnd->Create.则销毁窗口的调用次序: 1.       手工调用pWnd->DestroyWindow(): 2.       ...

  3. EntityFramework 异常 -- An entity object cannot be referenced by multiple instances of IEntityChangeTracker

    问题      在调用 DbSet 的 Attach()  方法时(与将 Entity 设置为 EntityState.Unchanged 状态等价)报告以下错误:      An entity ob ...

  4. JQuery中如何click中传递参数

    代码如下: click(data,fn)中的data其实是json对象,取的时候,只能通过当前的事件源来取,data是默认放在event中的,所以这里的data是eventdata,引用的时候也使用e ...

  5. ExecuteScalar的学习日志

    一:今天写关于调用sqlhelper类的时候出现了一个异常,我仔细观察没有错误啊,怎么回事:看图 二:出现错误时id的结果是0,也就是说ExcuteScalar的结果是null,明明数据库里有多行数据 ...

  6. 卡特兰数(Catalan Number) 算法、数论 组合~

    Catalan number,卡特兰数又称卡塔兰数,是组合数学中一个常出现在各种计数问题中出现的数列.以比利时的数学家欧仁·查理·卡塔兰 (1814–1894)命名. 卡特兰数的前几个数 前20项为( ...

  7. octopress 如何添加youku视频和本地视频（octopress how to add a youku video or a local video）

    用octopress 官方的video tag 可以添加视频,但是由于国内经常使用的是youku,所以下面是如何添加youku视频到octopress的教程. 首先添加youku.rb文件到路径:oc ...

  8. ACM2096

    #include<iostream> int main() { using namespace std; int a,b,count; cin>>count; while(co ...

  9. 开源sip server & sip client 和开发库 一览

    http://www.voip-info.org/wiki/view/Open+Source+VOIP+Software http://blog.csdn.net/xuyunzhang/article ...

  10. 12个强大的Web服务测试工具

    在过去的几年中,web服务或API的普及和使用有所增加. web服务或API是程序或软件组件的集合,可以帮助应用程序进行交互或通过形成其他应用程序或服务器之间的连接执行一些进程/事务处理.基本上有两种 ...