Angular: Event propagation example

http://angularjs.org/

by Matthew Marcus

HTML

<div ng-controller="MyCtrl">
  <div id="outer">
    <div id="inner" ng-click="innerClick($event)"">
        <button ng-click="buttonClick($event)">Click Me!</button>
    </div>
</div>
</div>

CSS

#outer{
    background:lightblue;
    padding:15px;
}
#inner{
    background:lightyellow;
    padding:15px;
}
#inner:hover{
    cursor:pointer;
}
button{
    
}
button:hover{
    cursor:pointer;
}

JavaScript

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.innerClick = function($event){
       console.log('innerClicked');
    };
    
    $scope.buttonClick = function($event){
        $event.stopPropagation();
        console.log('buttonClicked');
    };
}