控制器之间的交互方式
广播 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. 用Java随机生成四则运算

    代码链接:https://github.com/devilwjy/Code.Demo 需求分析: 1.程序可接收一个输入参数n,然后随机产生n道加减乘除练习题,每个数字在 0 和 100 之间,运算符 ...

  2. Codefores 835C-Star sky

    835C-Star sky 思路:dp,预处理一下c+1层前缀和. 代码: #include<bits/stdc++.h> using namespace std; #define ll ...

  3. Lua面向对象 --- 单例

    GameManager.lua: --单例模式是利用一个全局表来实现的 GameManager = {} Manager = {__index = GameManager} function Game ...

  4. 在WPF中添加Windows Form控件（包括 ocx控件）

      首先,需要向项目中的reference添加两个dll,一个是.NET库中的System.Windows.Forms,另外一个是WindowsFormsIntegration,它的位置一般是在C:\ ...

  5. English trip V1 - 8.What's in My Bag? 我的包里面有什么？ Teacher:Corrine Key: plular(复数) and singular(单数)

    In this lesson you will learn to talk about the things you have.   您将学习如何谈论您拥有的东西 课上内容(Lesson) What' ...

  6. Javascript基础一（2）

    循环语句 1.for循环 <script> //从1乘到100: //计数器 // var product = 1; // for(var i=1;i<=10;i++){ // pr ...

  7. Greedy Subsequences CodeForces - 1132G

    我们从右往左滑动区间, 假设dp[i]表示i为左端点时的最大长度, 通过观察可以发现, 每添加一个点, 该点$dp$值=它右侧第一个比它大位置处$dp$值+1, 但是每删除一个点会将所有以它为根的$d ...

  8. Superset

    Superset是一款可自助.可交互,可视化非常不错的产品 Superset is a data exploration platform designed to be visual, intuiti ...

  9. transition多个属性同时渐变(left/top)

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    < ...

  10. 数据库cmd窗口登录

    mysql -uroot -p123 -P3306 -h127.0.0.1 -uroot::root数据库登录用户名 -p123:数据库密码123 -P3306::3306数据库的端口号 -h127. ...