AngularJS的简单订阅发布模式例子

控制器之间的交互方式
广播 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>