Skip to content

Instantly share code, notes, and snippets.

@superchris

superchris/index.html

Created May 4, 2015 22:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save superchris/609bdd29e07bdb4afdb8 to your computer and use it in GitHub Desktop.
Save superchris/609bdd29e07bdb4afdb8 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin Events example // source http://jsbin.com/lafufu
Raw
index.html
<!DOCTYPE html>
<html ng-app="fruit">
<head>
<meta name="description" content="Events example" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-controller="ParentCtrl">
<h4>Parent Controller's Scope</h4>
<button ng-click="broadcast()" />Broadcast Event</button>
<p>{{emitText}}</p>
<div ng-controller="ChildCtrl">
<h4>Child Controller's Scope</h4>
<button ng-click="emit()">Emit Event</button>
<p>{{broadcastText}}</p>
</div>
<script id="jsbin-javascript">
fruit = angular.module("fruit", []);
fruit.controller("ParentCtrl", function($rootScope, $scope) {
$scope.broadcast = function() {
$rootScope.$broadcast("broadcast:event");
};
$rootScope.$on("emit:event", function() {
$scope.emitText = "I received an emit event!";
$scope.$apply();
});
});
fruit.controller("ChildCtrl", function($rootScope, $scope) {
$rootScope.$on("broadcast:event", function() {
$scope.broadcastText = "I received a broadcast event!";
$scope.$apply();
});
$scope.emit = function() {
$rootScope.$emit("emit:event");
};
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">fruit = angular.module("fruit", []);
fruit.controller("ParentCtrl", function($rootScope, $scope) {
$scope.broadcast = function() {
$rootScope.$broadcast("broadcast:event");
};
$rootScope.$on("emit:event", function() {
$scope.emitText = "I received an emit event!";
$scope.$apply();
});
});
fruit.controller("ChildCtrl", function($rootScope, $scope) {
$rootScope.$on("broadcast:event", function() {
$scope.broadcastText = "I received a broadcast event!";
$scope.$apply();
});
$scope.emit = function() {
$rootScope.$emit("emit:event");
};
});</script></body>
</html>
Raw
jsbin.lafufu.js
fruit = angular.module("fruit", []);
fruit.controller("ParentCtrl", function($rootScope, $scope) {
$scope.broadcast = function() {
$rootScope.$broadcast("broadcast:event");
};
$rootScope.$on("emit:event", function() {
$scope.emitText = "I received an emit event!";
$scope.$apply();
});
});
fruit.controller("ChildCtrl", function($rootScope, $scope) {
$rootScope.$on("broadcast:event", function() {
$scope.broadcastText = "I received a broadcast event!";
$scope.$apply();
});
$scope.emit = function() {
$rootScope.$emit("emit:event");
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment