Hi Friend if you are fresher read my previous post of angular Js tutorial.
Hi friends
today you study Communicating
between Scopes with $on, $emit, and $broadcast
$broadcast: - Sends an event from the current scope down to all of the
child scopes. The arguments are the name of the event and an object used to
provide supplementary data with the event.
$rootScope.
Broadcast ("Address code", {
type:
type, Address code: Address
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BroadCast</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("app", []);
app.controller("ctrl1", function ($scope) {
$scope.$on("broadcast", function (event, arg) {
$scope.Message = arg.Message;
});
});
app.controller("childctrl", function ($scope) {
$scope.Broadcasting = function (msg) {
$scope.$broadcast("broadcast", {
Message: msg });
}
});
app.controller("grandchildctrl", function ($scope) {
$scope.$on("broadcast", function (event, arg) {
$scope.gMessage = arg.Message;
});
});
app.controller("ctrl2", function ($scope) {
$scope.$on("broadcast", function (event, arg) {
$scope.Message = arg.Message;
});
});
</script>
</head>
<body ng-app="app">
<div ng-controller="ctrl1" style="padding:5px; border:1px solid red">
Parent: {{Message}}<br />
<div ng-controller="childctrl" style="padding:5px; border:1px solid green">
<input type="text" ng-model="Name" /> <input type="button" value="Broadcast" ng-click="Broadcasting(Name)" />
<br /><br />
<div ng-controller="grandchildctrl" style="padding:5px; border:1px solid pink">
Grand Child: {{gMessage}}
</div>
</div>
</div>
<br />
<div ng-controller="ctrl2" style="padding:5px; border:1px solid blue">
Sibling: {{gMessage}}
</div>
</body>
</html>
Output:-
$emit: - Sends an event from the current scope up to the root
scope.
Scope.
$emit ('Address', message: msg);
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Emit</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("app", []);
app.controller("ctrl1", function ($scope) {
$scope.$on("emit", function (event, arg) {
$scope.Message = arg.Message;
});
});
app.controller("childctrl", function ($scope) {
$scope.emittion = function (msg) {
$scope.$emit("emit", {
Message: msg });
}
});
app.controller("grandchildctrl", function ($scope) {
$scope.$on("emit", function (event, arg) {
$scope.gMessage = arg.Message;
});
});
app.controller("ctrl2", function ($scope) {
$scope.$on("emit", function (event, arg) {
$scope.Message = arg.Message;
});
});
</script>
</head>
<body ng-app="app">
<div ng-controller="ctrl1" style="padding:5px; border:1px solid red">
Parent: {{Message}}<br />
<div ng-controller="childctrl" style="padding:5px; border:1px solid green">
<input type="text" ng-model="Name" /> <input type="button" value="Emit" ng-click="emittion(Name)" />
<br /><br />
<div ng-controller="grandchildctrl" style="padding:5px; border:1px solid pink">
Grand Child: {{gMessage}}
</div>
</div>
</div>
<br />
<div ng-controller="ctrl2" style="padding:5px; border:1px solid blue">
Sibling: {{gMessage}}
</div>
</body>
</html>
Output:-
$on: - Registers a handler
function that is invoked when the specified event is received by the scope.
$scope.
On ("Address", function (event, args) {
$scope
[args. Type] = args.Adress;
});
I hope friends you will be
learn about $on, $emit, and $broadcast.
No comments:
Post a Comment