AngularJs $broadcast $emit $on 事件触发controller间的值传递

本文介绍AngularJS中controller间值传递的方法,通过$broadcast、$emit与$on实现父子及兄弟controller之间的通信。

使用angularjs,发现controller间的值传递,比较麻烦的,以后几篇文章会陆续说几种方法。

一,angularjs $broadcast $emit $on的处理思想

在一个controller里面通过事件触发一个方法,在方法里面通过$broadcast或$emit来定义一个变量,在父,子controller里面通过$on来获取。

二,实例说明angularjs $broadcast $emit $on的用法

1,html代码

<div ng-controller="ParentCtrl"> //父级
<div ng-controller="SelfCtrl"> //自己
<a ng-click="click()">click me</a>
<div ng-controller="ChildCtrl"></div> //子级
</div>
<div ng-controller="BroCtrl"></div> //平级
</div>


2,js代码
phonecatControllers.controller('SelfCtrl', function($scope) {
$scope.click = function () {
$scope.$broadcast('to-child', 'child');
$scope.$emit('to-parent', 'parent');
}
});
phonecatControllers.controller('ParentCtrl', function($scope) {
$scope.$on('to-parent', function(d,data) {
console.log(data); //父级能得到值
});
$scope.$on('to-child', function(d,data) {
console.log(data); //子级得不到值
});
});
phonecatControllers.controller('ChildCtrl', function($scope){
$scope.$on('to-child', function(d,data) {
console.log(data); //子级能得到值
});
$scope.$on('to-parent', function(d,data) {
console.log(data); //父级得不到值
});
});
phonecatControllers.controller('BroCtrl', function($scope){
$scope.$on('to-parent', function(d,data) {
console.log(data); //平级得不到值
});
$scope.$on('to-child', function(d,data) {
console.log(data); //平级得不到值
});
});


3,点击Click me的输出结果

child
parent
用$broadcast赋的值,只能子级得到值;$emit赋的值,只能父级得到;而平级的什么都不能得到。
AngularJS 中确定页面中触发了哪个事件,可以通过以下几种方式来实现,具体取决于事件的类型和触发场景: ### 1. 监听 DOM 事件并识别具体事件类型 在 AngularJS 的指令中,可以通过 `element.bind()` 方法监听 DOM 元素上的事件,并通过事件对象识别具体事件类型。例如,监听 `click`、`change`、`submit` 等事件: ```javascript element.bind('click change', function(event) { console.log('事件类型:', event.type); }); ``` 这种方式适用于自定义指令中对用户交互事件的监听和识别[^3]。 ### 2. 使用 `$on` 监听 `$scope` 上的自定义事件 AngularJS 支持使用 `$emit`、`$broadcast` 和 `$on` 方法在作用域之传递事件。例如,在子作用域中触发一个事件: ```javascript $scope.$emit('customEvent', eventData); ``` 然后在父作用域中监听该事件: ```javascript $scope.$on('customEvent', function(event, data) { console.log('事件类型:', event.name); console.log('事件数据:', data); }); ``` 这种方式适用于父子组件之或跨作用域通信的场景[^3]。 ### 3. 监听浏览器级别的事件 对于页面关闭、刷新等浏览器级别的事件,可以使用 `window.onbeforeunload` 或 AngularJS 的 `$rootScope.$on('$locationChangeStart')` 来捕获页面跳转或关闭动作: ```javascript window.addEventListener('beforeunload', function(e) { console.log('页面正在关闭或刷新'); }); ``` 或者在 AngularJS 中监听路由变化: ```javascript $rootScope.$on('$locationChangeStart', function(event) { console.log('页面即将跳转'); }); ``` 这种方式适用于需要在页面关闭或导航前执行清理逻辑或提示用户确认的场景[^5]。 ### 4. 使用 `$modal` 或 `$dialog` 的回调函数识别用户操作 当使用 `$modal` 插件打开模态窗口时,可以通过 `result.then()` 捕获用户点击“确定”或“取消”按钮的行为: ```javascript var modalInstance = $modal.open({ templateUrl: 'modal.html', controller: 'ModalCtrl', }); modalInstance.result.then(function(result) { console.log('用户点击了确定,返回数据:', result); }, function() { console.log('用户点击了取消或关闭按钮'); }); ``` 这种方式适用于模态窗口与主页面之的交互识别[^4]。 ### 5. 在 Layer 弹窗中识别按钮点击事件 如果使用 Layer 弹窗插件,可以通过 `btn` 配置项为每个按钮绑定事件处理函数,并通过回调识别用户点击了哪个按钮: ```javascript layer.open({ btn: ['保存', '获取函数测试', '返回'], yes: function(index, layero) { console.log('用户点击了“保存”按钮'); }, btn2: function(index, layero) { console.log('用户点击了“获取函数测试”按钮'); }, btn3: function(index, layero) { console.log('用户点击了“返回”按钮'); } }); ``` 这种方式适用于 Layer 弹窗中多个按钮的交互识别[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值