控制器之间的交互方式
广播 broadcast, 发射 emit 事件
类似于 js中的事件 , 可以自己定义事件
向上传递直到 document

在AngularJs中
向上传递直到 rootScope

观察者模式, 订阅发布模式 类似于js中的事件机制
订阅者.on('xx发布博客', function([内容]){ 通知我, 接收到博客的[内容] })
发布者.emit('xxx发布博客', {内容})
优点:
业务和实际触发者分离, 代码维护性相对好

缺点:
代码复杂性更高

AngularJs
$emit, $broadcast, $on

$emit: 向上发布事件, 类似于冒泡原理

$broadcast: 向下发布事件, 类似于捕获原理
scope.$broadcast/$emit('发布的主题', 携带的数据/内容, ...);

$on: 监听某个事件(主题)
scope.$on('监听的主题', 主题触发时的行为function(主题的事件对象event, 传递的参数1, 传递的参数2, ..){})

该例子就是 ：点击button  添加一个 box，  点击单个box 又 删除到该box；

点击button时候 用$broadcast函数广播一个broadcast事件，在子控制器里 利用$on函数接收广播到的事件，进行添加；

点击box时候  用$emit向上发射一个事件    在父控制器里用$on接收该事件

<!DOCTYPE html>

<html lang = "en">

<head>

    <meta charset = "UTF-8">

    <title>Title</title>

    <style>

        .box {

            width: 80px;

            height: 80px;

            border-radius: 5px;

            border: 1px solid #cccccc;

            margin: -1px 0 0 -1px;

            display: inline-block;

        }

    </style>

    <script src = "angular.js"></script>

</head>

<body ng-app = "app" ng-controller = "ctrl">

<button ng-click = "broadcast()">添加</button>

<div class = "out" ng-controller="ctrl1" ng-click="remove()">

    <div data-index="{{$index}}" class = "box" ng-repeat="i in arr track by $index"  ng-style="{background:i}" ng-click="emit($index)">

    </div>

</div>

<script>

    var app = angular.module('app', []);

    var arr = [color()];

    function color() {

        var col = 'rgb(';

        var radomCol1 = Math.floor(Math.random() * 256);

        var radomCol2 = Math.floor(Math.random() * 256);

        var radomCol3 = Math.floor(Math.random() * 256);

        col += radomCol1 + ',' + radomCol2 + ',' + radomCol3 + ')';

        return col;

    }

    app.controller('ctrl', ['$scope', function (s) {

        s.arr=arr;

        s.broadcast =function () {

            s.$broadcast('addBox',{color:color()});

        } ;

        s.$on('removeBox',function (event,data) {

            var index = data.index;

            arr.splice(index,1);

        });

    }]);

    app.controller('ctrl1',['$scope',function (s) {

        s.$on('addBox',function (event,data) {

//            console.log(data);

            arr.push(data.color);

        });

        s.emit=function (i) {

            s.$emit('removeBox',{index:i});

        };

    }]);

</script>

</body>

</html>

AngularJS的简单订阅发布模式例子的更多相关文章

  1. Publisher/Subscriber 订阅-发布模式

    Publisher/Subscriber 订阅-发布模式 本博后续将陆续整理这些年做的一些预研demo,及一些前沿技术的研究,与大家共研技术,共同进步. 关于发布订阅有很多种实现方式,下面主要介绍WC ...

  2. 设计模式---订阅发布模式(Subscribe/Publish)

    设计模式---订阅发布模式(Subscribe/Publish) 订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象.这个主题对象在自身状态变化时,会通知所有订阅者对象,使 ...

  3. RabbitMQ下的生产消费者模式与订阅发布模式

    所谓模式,就是在某种场景下,一类问题及其解决方案的总结归纳.生产消费者模式与订阅发布模式是使用消息中间件时常用的两种模式,用于功能解耦和分布式系统间的消息通信,以下面两种场景为例: 数据接入   假设 ...

  4. Kafka下的生产消费者模式与订阅发布模式

    原文:https://blog.csdn.net/zwgdft/article/details/54633105   在RabbitMQ下的生产消费者模式与订阅发布模式一文中,笔者以“数据接入”和“事 ...

  5. js设计模式之代理模式以及订阅发布模式

    为啥将两种模式放在一起呢?因为这样文章比较长啊. 写博客的目的我觉得首要目的是整理自己的知识点,进而优化个人所得知识体系.知识成为个人的知识,就在于能够用自己的话表达同一种意义. 本文是设计模式系列文 ...

  6. saltstack系列(三)——zmq订阅/发布模式

    zmq订阅发布模式 server端代码: #coding=utf-8 ''''' 服务端,发布模式 ''' import zmq from random import randrange contex ...

  7. ionic2踩坑之订阅发布模式的实现

    原文地址:http://www.cnblogs.com/eccainiao/p/6429536.html 转载请说明. 在ionic2中实现订阅发布模式,需要用到Events. Events下面有三个 ...

  8. 订阅发布模式eventEmiter

    // 订阅发布模式 class EventEmitter { constructor() { this._events = {}; } on(name, callback) { if (this._e ...

  9. Java里观察者模式(订阅发布模式)

    创建主题(Subject)接口 创建订阅者(Observer)接口 实现主题 实现观察者 测试 总结 在公司开发项目,如果碰到一些在特定条件下触发某些逻辑操作的功能的实现基本上都是用的定时器 比如用户 ...

随机推荐

  1. 基于Socket的Android手机视频实时传输

    首先,简单介绍一下原理.主要是在手机客户端 (Android)通过实现Camera.PreviewCallback接口,在其onPreviewFrame重载函数里面获取摄像头当前图像数据, 然后通过S ...

  2. Codeforces 912E - Prime Gift

    912E - Prime Gift 思路: 折半枚举+二分check 将素数分成两个集合(最好按奇偶位置来,保证两集合个数相近),这样每个集合枚举出来的小于1e18的积个数小于1e6. 然后二分答案, ...

  3. Codeforces 535C - Tavas and Karafs

    535C - Tavas and Karafs 思路:对于满足条件的r,max(hl ,hl+1 ,hl+2 ,......,hr )<=t(也就是hr<=t)且∑hi<=t*m.所 ...

  4. C#判断一个字符串是否全部为空格的一个简单方法

    string nickName = " "; if (nickName.Trim() == string.Empty) { } else { }

  5. 雷林鹏分享：C# 多态性

    C# 多态性 多态性意味着有多重形式.在面向对象编程范式中,多态性往往表现为"一个接口,多个功能". 多态性可以是静态的或动态的.在静态多态性中,函数的响应是在编译时发生的.在动态 ...

  6. English trip -- VC(情景课) 7 A Shopping 购物

    Words The clothes place a dress 长裙      short skirt 短裙 pants 裤子   /  trousers 长裤  / shorts 短裤 a shir ...

  7. JS-Object (3) JSON; Event Object相关知识（事件冒泡，事件监听, stopPropagation()

    通常用于在网站上表示和传输数据 使用JavaScript处理JSON的所有工作,包括访问JSON对象中的数据项并编写自己的JSON. JSON text基本上就像是一个JavaScript对象,这句话 ...

  8. Leetcode 90

    // 重复元素在去重的时候会出现顺序不同去不了重,这时候需要对add进行排序class Solution { public: vector<vector<int>> subse ...

  9. 一篇来自网络的关于“enqueue”events的简短参考（转）

    仅供自己和各位同学参考: Enqueue Type Description enq: AD - allocate AU Synchronizes accesses to a specific OSM ...

  10. Python简单网页爬虫——极客学院视频自动下载

    http://blog.csdn.net/supercooly/article/details/51003921