控制器之间的交互方式
广播 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. Codeforces 101487E - Enter The Dragon

    101487E - Enter The Dragon 思路:做的时候两个地方理解错了,第一个事我以为龙吸了水,水就干了,其实龙是在下雨之前吸的,下雨时湖水又满了,所以湖水永远不会干:第二个是以为只要找 ...

  2. 只能输入float

    if (((int)e.KeyChar < 48 || (int)e.KeyChar > 57) && (int)e.KeyChar != 8 && (in ...

  3. .split(",", -1);和.split(",")的区别

    .split(",", -1);和.split(",")的区别在于://eg:String a="河南省,,金水区".//a.split(& ...

  4. python-day52--前端html、css

    一.html需掌握的: 1. img标签 属性:src alt title width height 2. a标签 属性:href target 3. ul 标签及li 标签,二者都是块级标签 ul ...

  5. python 小练习 11

    桌子上有一堆数量不超过20的果子,每个果子的重量都是不超过20的正整数,全部记录在列表 L 里面.小明和小红决定平分它们,但是由于他们都太自私,没有人愿意对方比自己分得的总重量更多.而果子又不能切开, ...

  6. python 小练习 9

    还记得中学时候学过的杨辉三角吗?具体的定义这里不再描述,你可以参考以下的图形: 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 .............. 先 ...

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

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

  8. arc路径-磊哥

    不然直接设置80 90要转换成弧度比如Math.PI代表180度你就要 80*Math.PI/180190*Math.PI/180<!DOCTYPE html><html>&l ...

  9. IE6中CSS常见BUG全集及解决方案——摘自网友

    IE6中CSS常见BUG全集及解决方案 IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, ...

  10. jenkins安装笔记(一)

    转载地址:https://www.cnblogs.com/sylvia-liu/p/4485311.html 自动化架构搭建过程中为实现当开发源码更新时自动化脚本同步触发自动执行,使用到持续集成工具J ...