AngularJSAngularJS的读书–$on、$emit和$broadcast的运用

 

最后结出

 

ParentCtrl parent

ChildCtrl child

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

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

 

事例如下

AngularJS中的效率域有一个非凡有层次和嵌套显明的协会。其中它们都有一个最首要的$rootScope(也就说对应的Angular应用或者ng-app),然后此外兼具的功效域部分都是后续自那些$rootScope的,或者说都是嵌套在主功能域上面的。很多时候,你会发觉那一个功效域不会共享变量或者说都不会从另一个原型继承什么。

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

html代码

那么在这种情景下,如何在效用域之间通信呢?其中一个取舍就是在应用程序成效域之中成立一个单例服务,然后经过这一个服务处理所有子功能域的通信。

前天就到此处,本来是想早晚上床的,结果整理了一晃相片,再写完博客,又到12:00了。。。

 

 

在AngularJS中还有此外一个精选:通过功用域中的事件处理通信。不过这种艺术有一对限量;例如,你并无法广泛的将事件传播到拥有监控的效能域中。你必须挑选是否与父级成效域或者子成效域通信。

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

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也得以吸收多少个参数。

 

 

 

在$on的措施中的event事件参数,其目标的性质和艺术如下

AngularJS,js代码

 

 

相关文章