码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-04-12 20:47:45      阅读:1490      评论:0      收藏:0      [点我收藏+]

标签:xxx   dex   机制   document   cas   src   blog   cli   display   

控制器之间的交互方式
广播 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的简单订阅发布模式例子

标签:xxx   dex   机制   document   cas   src   blog   cli   display   

原文地址:http://www.cnblogs.com/shuaishuaidejun/p/6701045.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!