控制器之间的交互方式
广播 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. URLConnection和HttpClient使用入门

    本讲内容:URLConnection和HttpClient使用入门 在 Android中除了使用WebView控件访问网络以外,还有用代码方式访问网络的方法,代码方式有时候会显得更加灵活.本讲会介绍使 ...

  2. mac 下安装mongodb

    转载自https://segmentfault.com/a/1190000002547229 概念 MongoDB 是一个跨平台的,面向文档的数据库,提供高性能,高可用性和可扩展性方便. MongoD ...

  3. js如何创建JSON对象

    js如何创建JSON对象 一.总结 一句话总结:直接创建js数组和js对象即可,然后JSON.stringify就可以获取json字符串,js中的一切都是对象,而且js中的对象都是json对象 js ...

  4. 20170727xlVBA根据数据表和模板工作簿生成个人明细表工作簿

    Sub CreateTables() Dim Wb As Workbook Dim OpenWb As Workbook Dim Sht As Worksheet Dim Rng As Range D ...

  5. Buy Low Sell High CodeForces - 867E (思维,贪心)

    大意: 第i天可以花$a_i$元买入或卖出一股或者什么也不干, 初始没钱, 求i天后最大收益 考虑贪心, 对于第$x$股, 如果$x$之前有比它便宜的, 就在之前的那一天买, 直接将$x$卖掉. 并不 ...

  6. Leetcode 74

    class Solution { public: bool searchMatrix(vector<vector<int>>& matrix, int target) ...

  7. 对LOV中的值进行强制验证

    当LOV之中只有一个LovMap返回当前ITEM时,修改了LOV输入框的值,会弹出验证窗口,若此时忽略此窗口,在进行下一步的时候不会去验证此LOV中的值是否一定在可选列表中. 解决方式, 1.在页面加 ...

  8. yum安装docker报 No package docker available错误

    解决方案: yum install epel-release 然后再安装 CentOS6 yum install http://mirrors.yun-idc.com/epel/6/i386/epel ...

  9. iOS-UI篇—简单的浏览器查看程序和Tomcat简单实现

    #import "ViewController.h" @interface ViewController () @property (retain, nonatomic) NSAr ...

  10. win7下安装node及出现的npm问题

    按照官网下载安装,选择 Windows Installer (.msi):,一直next安装,默认安装在C:\Program Files\nodejs下,环境变量会自动添加 如果安装后,打开cmd输入 ...