angular中自身子元素以及父元素之间数据的通信

最新推荐文章于 2020-10-20 15:41:36 发布

zhanglongdream

最新推荐文章于 2020-10-20 15:41:36 发布

阅读量1.2k

点赞数

分类专栏： angular

本文链接：https://blog.csdn.net/zhanglongdream/article/details/52629104

版权

angular 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先明白怎么在作用域之间进行通信

1 一般的做法就是创建一个单利的服务，然后我们可以将这个服务注入到控制器中，处理所有子作用域的通信

但是当我们通过作用域中事件来处理通信的时候，这种的方法就不太行了，因为我们并不能广泛的将事件传播到所有监控的作用域中，而且即使我们监控所有的作用域但是这对于网站整体的性能来说不太好，所以我们可以选择是否与父作用域或者子作用域进行通信。

这里所说的 $on $emit 以及 $broadcast就可以让事件，数据在controller之间进行传递变得简单。

$on 用于接受 event和data

$emit 只能向parent controller 传递 event 和 data

$broadcast 只能向child controller传递event 和 data

在这里需要指出的事$broadcast $emit事件必须依靠其他的事件进行触发。。。。。

而$on 可以直接写其中的参数有

event.targetScope 发生或者传播原始事件的作用域

event.currentScope 目前正在处理的事件的作用域

event.name 事件的名称

event.stopPropagation() 阻止事件冒泡的函数只适用于使用$emit发出的事件

event.preventDefault() 这个方法不会做什么事情，但是会设置defaultPrevented为true 。直到事件监听器的实现者采取行动之前他才会检查defaultPrevented的值。

event.defaultPrevent 如果调用了preventDefault则为true

resource.quert({
catid : catid,
page : nextPage
},function(r){
nextPage++;
if(r.resule.length < 20){
hasNexPage = false;
}
moreTopicsData = moreTopicsData.concat(r.result);
topics[catid] = {
hasNexPage : hasNexPage,
"nextPage" : nexPage,
"data" : moreTopicsData
}
//在这里请求完成之后通知 controller
$rootScope.$broadcast("provider");
})

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.js"></script>
</head>
<body ng-app = "app">
<div ng-controller = "app1" ng-click="oncli()">app1
<div ng-controller ="app2" ng-click="long()">app2
<div ng-controller="app3">app3</div>
</div>
<div ng-controller = "apps">app4</div>
</div>

<script type="text/javascript">
angular.module("app",[])
.controller("app2",function($scope){
$scope.long = function(){
console.log("ll")
$scope.$broadcast("Child","子元素");
$scope.$emit("Parent","父元素")
}
})
.controller("app1",function($scope){
$scope.$on("Parent",function(event,data){
console.log(data,event.name)
})
$scope.oncli = function(){
$scope.$broadcast("slParent","同级元素没办法用")
}
})
.controller("app3",function($scope){
$scope.$on("Child",function(event,data){
console.log(data,event.name)
})
})
.controller("apps",function($scope){
$scope.$on("slParent",function(event,data){
console.log(data,event.name)
})
$scope.$on("Child",function(event,data){
console.log(event.name , data)
});
$scope.$on("Parent",function(event,data){
console.log(data,event.name)
})
})
</script>
</body>
</html>