<!DOCTYPE html>
<html ng-app="firstApp">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
border: 1px solid #ff7300;
padding: 20px;
margin: 10px;
border-radius: 5px;
}
</style>
<script src="js/angular1.5.11/angular.js"></script>
</head>
<body>
<div ng-controller="ParentController">
<!--父级-->
<div ng-click="clkP()">click--给child</div>
<div ng-controller="OneSelfController">
<!--自己-->
<span ng-click="clkme()">click me</span>
<div ng-controller="ChildController">
它是OneSelfController的子级
</div>
<!--子级-->
</div>
<div ng-controller="siblingsController">
它与OneSelfController是平级
</div>
<!--平级-->
</div>
<script>
var app = angular.module('firstApp', []); //app模块名
app.controller('OneSelfController', function($scope) {
$scope.clkme = function() {
$scope.$broadcast('sendChild', '我给子控制器传递数据');
$scope.$emit('sendParent', '冒泡到父元素')
}
})
.controller('ParentController', function($scope) {
$scope.$on('sendParent', function(event, data) { //监听在子控制器中定义的 sendParent 事件
console.log('OneSelfController传过来的', data, event.name, event); //事件名称：sendParent
});
$scope.clkP = function() {
$scope.$broadcast('sendAllChild', '让siblingsController接收到');
}
})
.controller('ChildController', function($scope) {
$scope.$on('sendChild', function(event, data) { //监听在子控制器中定义的 sendChild 事件
console.log('ChildCtrl', data, event.name, event); // 事件名称：sendChild
});
})
.controller('siblingsController', function($scope) {
$scope.$on('sendAllChild', function(event, data) {
console.log('值过来吧', data);
});
//下面事件不会触发
$scope.$on('sendParent', function(event, data) {
console.log('平级得不到值', data);
});
$scope.$on('sendChild', function(event, data) {
console.log('平级得不到值', data);
});
});
</script>
</body>
</html>
