AngularJS的简单订阅发布模式例子
Posted 暖暖的心窝子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于AngularJS的简单订阅发布模式例子的主要内容，如果未能解决你的问题，请参考以下文章
设计模式 行为型模式 -- 观察者模式（发布-订阅(Publish/Subscribe)模式）