Angularjs controller之间的信息传递

本文介绍了AngularJS中控制器间的通信方法,包括使用单例服务进行通信及通过作用域中的事件处理通信的方式。详细解释了$on、$emit和$broadcast的功能,并通过示例展示了如何在不同层级的控制器间传递数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

       之前在做用angular写前端框架的时候很苦恼控制器之间的独立性,父级控制器可以控制子控制器,但是子控制器却很难控制父控制器。后来在用socket传递数据的时候,发现他的服务是通过emit发送,on接收。我就想angular是不是也会有这样的服务,后来试了下,果然有。

 

        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);          //平级得不到值  
    });  
});

  

  $emit和$broadcast可以传多个参数,$on也可以接收多个参数。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

道门十三

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值