参考了 Todd Motto 的博文
组件需要通信时,我想到了三种方式。
-
$scope.$parent
一层一层地找,直到找到那个目标组件的$scope 为止,但是组件嵌套了三层以上,就得 $scope.$parent.$parent.$parent...是不是很绝望。
-
定义组件是的 bindings
define(['demo'], function(demo) {
return demo.component('demoComponent', {
bindings: {
param: '<',
callback: '&'
},
templateUrl: 'js/components/demoComponent/demoComponent.component.html',
controller: demoComponentController,
controllerAs: 'vm'
});
});
<demo-component param="xxx" callback="xxx"></demo-component>
这种方式常见于 父子组件间的通信
-
通过$scope 事件
-
事件的发生
$emit 子组件是给父组件发事件
$broadcast 父组件是给子组件发事件
$scope.$emit('儿子发射的消息',{param: '五行缺金'});
$scope.$broadcast('来自爸爸的广播',{param: '十亿拿好'});
-
事件的监听
在组件的 controller 中,通过$scope.$on 监听事件。
区别事件是在于事件的命名空间,例如:‘儿子发射的消息’和‘来自爸爸的广播’
$scope.$on('儿子发射的消息', function($event, param){
// 给钱
});
$scope.$on('来自爸爸的广播', function($event, param){
// 收钱
});
-
阻止事件
只有用$emit 的时间才可以取消, 也就是说儿子不能阻止爸爸的消息传给别的儿子,或者孙子,爸爸可以阻止儿子的消息传给爷爷==,嗯, 是的
$scope.$on('儿子发射的消息', function($event, param){ // 不能告诉你爷爷, 知道吧? \$event.stopPropagation(); });
-
取消事件监听
在组件销毁前,把去掉事件监听,正如大神博文所说的,AngularJS 的文档中并没有取消监听的方法,于是乎。。。
app.controller('ParentCtrl',
function ParentCtrl ($scope) {
// $rootScope $on
var myListener = $rootScope.$on('child', function (event, data) {
//
});
// $scope $destroy
$scope.$on('$destroy', myListener);
});
大神的博文还说到了其他的点,这里只简单了 记录了在下在项目中用到的,经过实验验证过的点,详细的可以拜读大神的 原文。
网友评论