控制器之间的交互方式
广播 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. 远程SqlServer服务器

    ①,安装net framework3.5. ②,安装sqlserver2014(例). ③,基本配置. 安装sqlserver2014时,开启混合认证模式.当然,也可以在安装后,通过sqlserver ...

  2. Codeforces 197D - Infinite Maze

    197D - Infinite Maze 思路:bfs,如果一个点被搜到第二次,那么就是符合要求的. 用vis[i][j].x,vis[i][j].y表示i,j(i,j是取模过后的值)这个点第一次被搜 ...

  3. cookie session localstorage sessionStorage区别

    cookie:http://www.cnblogs.com/Darren_code/archive/2011/11/24/Cookie.html 重要特点: 1.cookie 有大小设置,有过期时间设 ...

  4. Java-Java语言

    2017-10-03 21:25:38 Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征.J ...

  5. java web mysql.jar java.lang.ClassNotFoundException: com.mysql.jdbc.Driver

    java.lang.ClassNotFoundException: com.mysql.jdbc.Driver 折腾了一上午,找到了这错误的原因.哎……悲剧! 确认包已经被导入web工程目录. 原来是 ...

  6. Yii 语言设置 中文提示信息

    1.  在main.php配置文件中加入 'language'=>'zh_cn', 注: 在URL中追加参数lang=zh_cn即可实现中文 2.  在Controller方法中添加 publi ...

  7. mysql 视图，事务，存储过程，触发器

    一 视图 视图是一个虚拟表(非真实存在),是跑到内存中的表,真实表是硬盘上的表.使用视图我们可以把查询过程中的临时表摘出来,保存下来,用视图去实现,这样以后再想操作该临时表的数据时就无需重写复杂的sq ...

  8. Ubuntu18.04配置静态ip遇到的报错

    说明: 因为很多测试环境在这个Ubuntu系统上装着,却由于虚拟服务器的重启.断电,每次Ip发生变化,就得更新环境,所以需要把该环境的ip配置成静态的,一劳永逸. 根据以往配置Ubuntu静态ip的经 ...

  9. MySQL缓存机制

    对MySql查询缓存及SQL Server过程缓存的理解及总结 一.MySql的Query Cache 1.Query Cache   MySQL Query Cache是用来缓存我们所执行的SELE ...

  10. 高精度乘法，string中的坑

    #include "bits/stdc++.h" using namespace std; ]; ]; int main() { while(cin >> a > ...