A Pen by CarterTsai.

$emit-and-$broadcast-Example.markdown

$emit and $broadcast Example

http://stackoverflow.com/questions/14502006/scope-emit-and-on-angularjs

A Pen by CarterTsai on CodePen.

License.

index.html

<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>

script.js

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){
}

style.scss

@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;
}