Skip to content

Instantly share code, notes, and snippets.

@CarterTsai
Created November 8, 2013 13:22
Show Gist options
  • Save CarterTsai/7370972 to your computer and use it in GitHub Desktop.
Save CarterTsai/7370972 to your computer and use it in GitHub Desktop.
A Pen by CarterTsai.
<div ng-app="" ng-controller="MainCtrl">
<!--"Parent1 -->
<div class="parent1" ng-controller="ParentCtrl">
<label>Parent1({{count}}) {{msg}}</label>
<div class="child1" ng-controller="ChildCtrl">
<label>Child1({{count}}) {{msg}}</label><br>
<button ng-click="$emit('count p','child1')"> Call Parent Count with Emit on Child1</button><br>
<button ng-click="$broadcast('count p','child1')"> Call Parent Count with Broadcast on Child1</button><br>
<button ng-click="$broadcast('count c','child1')"> Call Child1 Count with Broadcast on Child1</button><br>
<button ng-click="$emit('reset','emit reset of child1 ')"> Call Reset with Emit on Child1</button>
<button ng-click="$broadcast('reset','broadcast reset of child1')">Call Reset with Broadcast on Child1</button>
<div class="footer" ng-controller="InsideCtrl">
<label>Inside of Child1</label> <br>
<button ng-click="$emit('reset','reset of inside')"> Call Reset with Emit on inside</button>
</div>
</div>
<!-- Neighbor -->
<div class="child1" ng-controller="ChildCtrl">
<label>Child1 Neighbor({{count}}) {{msg}}</label> <br>
<button ng-click="$emit('count p','child1')"> Call Parent Count with Emit on Child1 Neighbor</button><br>
<button ng-click="$broadcast('count p','child1 Neighbor')"> Call Parent Count with Broadcast on Child1 Neighbor</button><br>
<button ng-click="$broadcast('count c','child1 Neighbor')"> Call Child1 Count with Broadcast on Child1 Neighbor</button><br>
<button ng-click="$emit('reset','emit reset of child1 Neighbor')"> Call Reset with Emit on Child1 Neighbor</button>
<button ng-click="$broadcast('reset','broadcast of reset child1 Neighbor')">Call Reset with Broadcast on Child1 Neighbor</button>
<div class="footer" ng-controller="InsideCtrl">
<label>Inside of Child1 Neighbor</label> <br>
<button ng-click="$emit('reset','reset of inside Neighbor')"> Call Reset with Emit on inside</button>
</div>
</div>
</div>
<hr>
<!-- "Parent2 -->
<div class="parent2" ng-controller="ParentCtrl">
<label>Parent2({{count}}) {{msg}}</label>
<div class="child2" ng-controller="ChildCtrl">
<label>Child2({{count}}) {{msg}}</label><br>
<button ng-click="$emit('count p','child2')"> Call Parent Count with Emit on Child2</button><br>
<button ng-click="$broadcast('count p','child2')"> Call Parent Count with Broadcast on Child2</button><br>
<button ng-click="$broadcast('count c','child2')"> Call Child2 Count with Broadcast on Child2</button><br>
<button ng-click="$emit('reset','emit reset of child2 ')">Call Reset with Emit on Child2</button>
<button ng-click="$broadcast('reset','broadcast reset of child2')"> Call Reset with Broadcast on Child2</button>
<div class="footer" ng-controller="InsideCtrl">
<label>Inside of Child2</label> <br>
<button ng-click="$emit('reset','reset of inside')"> Call Reset with Emit on inside</button>
</div>
</div>
</div>
<hr>
<button ng-click="$broadcast('reset','broadcast reset of parent')"> Reset Broadcast</button>
</div>
function MainCtrl($scope){
}
// Parent Ctrl
function ParentCtrl($scope){
$scope.count = 1;
$scope.msg = "";
$scope.$on("count p", function(event, message){
$scope.count += 1;
$scope.msg = "Event from "+message;
});
$scope.$on("reset", function(event, message){
$scope.count = 0;
$scope.msg = "Event from "+message;
});
}
// ChildCtrl
function ChildCtrl($scope){
$scope.count = 3;
$scope.msg = "";
$scope.$on("count c", function(event, message){
$scope.count += 1;
$scope.msg = "Event from "+message;
});
$scope.$on("reset", function(event, message){
$scope.count = 0;
$scope.msg = "Event from "+message;
});
}
// Footer
function InsideCtrl($scope){
}
@import "compass";
$width_p: 100%;
$height_p: 460px;
$width_c: 100%;
$height_c: 210px;
$width_f: 100%;
$height_f: 50px;
.parent1{
width: $width_p;
height: $height_p;
background-color: #c1a1d1;
}
.parent2{
width: $width_p;
height: $height_p - 210;
background-color: #3CB371;
}
.child1{
width: $width_c;
height: $height_c;
background-color: #00FF7F;
float: left;
border: 1px solid #000;
}
.child2{
width: $width_c;
height: $height_c;
background-color: #008B8B;
float: left;
}
.footer{
width: $width_f;
height: $height_f;
background-color: #CC911C;
border: 1px solid #000;
}
label{
color: #0000FF;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment