首页 > Web开发 > 详细

AngularJS的学习--$on、$emit和$broadcast的使用

时间:2016-12-30 18:20:03      阅读:221      评论:0      收藏:0      [点我收藏+]

  说到这$on、 $emit 和 $broadcast。 我们不经就像,这几个东西是什么,有什么用,该如何用。

  简单的说下:     刚开始接触angularjs的时候,我们带参访问,一般都是通过:参数    的方式来传参,为了页面跳转时,能够获取到,上一页面的值,这个办法只有通过controller传参

           但是接触到广播$broadcast,这个东西之后,就觉得用$scope去取on里面的值就方便多了。

  

  • $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 child

ChildCtrl parent

 

 

    $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中通信要方便许多~~

 

  原文地址:http://www.cnblogs.com/CraryPrimitiveMan/p/3679552.html

AngularJS的学习--$on、$emit和$broadcast的使用

原文:http://www.cnblogs.com/Uncle-Maize/p/6237463.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!