AngularJS学习 – 使用$ on，$ emit和$ broadcast

无评论

AngularJS中之作用域有一个死有层次与嵌套分明的构造。其中她都产生一个生死攸关的$rootScope(也便说对应之Angular应用或ng-app)，然后另外有的作用域部分还是连续自是$rootScope的，或者说还是嵌套在主作用域下面的。很多下，你见面发觉这些作用域不会见共享变量或者说还不见面打另一个原型继承什么。

那么在这种场面下，如何当作用域之间通信为？其中一个抉择虽是以应用程序作用域之中创建一个单例服务，然后经者服务处理所有子作用域的通信。

当AngularJS中还有另外一个增选：通过作用域中之事件处理通信。但是这种方法发生有限量；例如，你连无可知广泛的将事件传播及所有监控的作用域中。你必须选择是否跟父级作用域或者子作用域通信。

$on、$emit和$broadcast使得event、data在controller之间的传递变的简。

  • $emit只能向parent controller传递event与data
  • $broadcast只能向child controller传递event与data
  • $on用于接收event与data

事例如下

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>

js代码

app.controller('SelfCtrl', function($scope) {
    $scope.click = function () {
        $scope.$broadcast('to-child', 'child');
        $scope.$emit('to-parent', 'parent');
    }
});

app.controller('ParentCtrl', function($scope) {
    $scope.$on('to-parent', function(event,data) {
        console.log('ParentCtrl', data);       //父级能得到值
    });
    $scope.$on('to-child', function(event,data) {
        console.log('ParentCtrl', data);       //子级得不到值
    });
});

app.controller('ChildCtrl', function($scope){
    $scope.$on('to-child', function(event,data) {
        console.log('ChildCtrl', data);         //子级能得到值
    });
    $scope.$on('to-parent', function(event,data) {
        console.log('ChildCtrl', data);         //父级得不到值
    });
});

app.controller('BroCtrl', function($scope){  
    $scope.$on('to-parent', function(event,data) {  
        console.log('BroCtrl', data);          //平级得不到值  
    });  
    $scope.$on('to-child', function(event,data) {  
        console.log('BroCtrl', data);          //平级得不到值  
    });  
});

最终结果

ParentCtrl parent

ChildCtrl child

 

$emit和$broadcast可以招多独参数，$on也得接过多单参数。

 

当$on的点子吃的event事件参数，其目标的习性和道如下

事件属性 目的
event.targetScope 发出或者传播原始事件的作用域
event.currentScope 目前正在处理的事件的作用域
event.name 事件名称
event.stopPropagation() 一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用`$emit`发出的事件)
event.preventDefault() 这个方法实际上不会做什么事，但是会设置`defaultPrevented`为true。直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。
event.defaultPrevented 如果调用了`preventDefault`则为true

 

 

 

 

 

 

感觉到比service在不同controller中通信要有利广大~~

 

今日即令顶这里，本来是纪念早上床的，结果整理了瞬间肖像，再写了博客，又交12:00了。。。

 

相关文章