$on , $emit , $broadcast , $apply
$scope.$on('事件名称',function(event,data){
//监听事件
});
$scope.$emit('事件名称','传递的数据');//子元素向父元素发送事件请求,传递数据;
$scope.$broadcast('事件名称','传递的数据');//父元素向子元素发送事件请求,传递数据;
$scope.$apply();//当数据值发送改变时,及时更新数据;
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="firstApp">
<div ng-controller="MyController">
<h1>This is the parent scope:{{answer}}</h1>
<div ng-controller="MyController">
<h2>This scope inherits from the parent scope</h2>
This prints '42':{{answer}}
</div>
</div>
<div ng-controller="allEvent">
接收子元素传递给父元素的值:{{all}}
<div ng-controller="parentEvent">
<span ng-click="parentClick()">父级点击,向子级传数据</span>
<div ng-controller="childEvent">
它是parentEvent的子级 {{answer}}
</div>
</div>
<div ng-click="clickAll">点击向allEvent发送数据</div>
</div>
</body>
<script src="common/angular.js"></script>
<script>
var app=angular.module('firstApp',[]);
app.controller('MyController',function($scope){
$scope.answer = 42;
}).controller('parentEvent',function($scope){
$scope.parentClick = function (){
$scope.$broadcast('sendChild',12);
$scope.$emit('sendAll','你好呀,我是子元素');
}
}).controller('childEvent',function($scope){
$scope.$on('sendChild',function (event , data){
console.log('child');
console.log(event);
console.log(data);
$scope.answer = data;
})
}).controller('allEvent',function($scope){
$scope.$on('sendAll',function (event , data){
console.log('child');
console.log(event);
console.log(data);
$scope.all = data;
})
})
</script>
</html>
