父控制器向子控制器通信
<!DOCTYPE html>
<html>
<head>
<title>Broadcasting</title>
<script src="angular.js"></script>
</head>
<body ng-app="app">
<div ng-controller="parentCtrl" style="border:2px solid #E75D5C; padding:5px;">
<h1>Parent Controller</h1>
<input ng-model="msg">
<button ng-click="handleClick(msg);">Broadcast</button>
<br />
<br />
<div ng-controller="childCtrl" style="border:2px solid #428bca;padding:5px;">
<h1>Child Controller</h1>
<p>Broadcast Message : {{message}}</p>
</div>
</div>
<script>
var app = angular.module('app', []);
app.controller("parentCtrl", function($scope) {
$scope.handleClick = function(msg) {
$scope.$broadcast('eventName', {
message: msg
});
};
});
app.controller("childCtrl", function($scope) {
$scope.$on('eventName', function(event, args) {
$scope.message = args.message;
console.log($scope.message);
});
});
</script>
</body>
</html>子控制器向父控制器通信
<!DOCTYPE html>
<html>
<head>
<title>Emit</title>
<script src="angular.js"></script>
</head>
<body ng-app="app">
<div ng-controller="parentCtrl" style="border:2px solid #E75D5C; padding:5px;">
<h1>Parent Controller</h1>
<p>Emit Message : {{message}}</p>
<br />
<div ng-controller="childCtrl" style="border:2px solid #428bca;padding:5px;">
<h1>Child Controller</h1>
<input ng-model="msg">
<button ng-click="handleClick(msg);">Emit</button>
</div>
</div>
<script>
var app = angular.module('app', []);
app.controller("parentCtrl", function($scope) {
$scope.$on('eventName', function(event, args) {
$scope.message = args.message;
console.log($scope.message);
});
});
app.controller("childCtrl", function($scope) {
$scope.handleClick = function(msg) {
$scope.$emit('eventName', {
message: msg
});
};
});
</script>
</body>
</html>兄弟控制器通信
<!DOCTYPE html>
<html>
<head>
<title>Emit and Broadcasting</title>
<script src="angular.js"></script>
</head>
<body ng-app="app">
<div ng-controller="parentCtrl" style="border:2px solid #E75D5C; padding:5px;">
<h1>Parent Controller</h1>
<p>Message : {{message}}</p>
<div ng-controller="firstCtrl" style="border:2px solid #428bca;padding:5px;">
<h1>first Controller</h1>
<input ng-model="msg">
<button ng-click="handleClick(msg);">Broadcast</button>
</div>
<br />
<div ng-controller="secondCtrl" style="border:2px solid #428bca;padding:5px;">
<h1>second Controller</h1>
<p>result : {{result}}</p>
</div>
</div>
<script>
var app = angular.module('app', []);
app.controller("parentCtrl", function($scope) {
$scope.$on('eventName', function(event, args) {
$scope.message = args.message;
$scope.$broadcast('broadcastEvent', {
message: args.message
});
});
});
app.controller("firstCtrl", function($scope) {
$scope.handleClick = function(msg) {
$scope.$emit('eventName', {
message: msg
});
};
});
app.controller("secondCtrl", function($scope) {
$scope.$on("broadcastEvent", function(event, args) {
$scope.result = args.message;
})
});
</script>
</body>
</html>