標籤：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的簡單訂閱發布模式例子
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
