Execute
<!DOCTYPE html> <html> <head> <title>Wikitechy AngularJS Tutorials</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> </head> <body> <h2> Wikitechy Scope Event Propagation in AngularJS</h2> <div ng-app= "myApp" ng-controller="eventCtrl"> Root scope <b>Event</b> count: {{count}} <ul> <li ng-repeat="i in [1]" ng-controller="eventCtrl"> <button ng-click="$emit('Event')">$emit('Event')</button> <button ng-click="$broadcast('Event')">$broadcast('Event')</button> <br> Middle scope <b>Event</b> count: {{count}} <ul> <li ng-repeat="item in [1, 2]" ng-controller="eventCtrl"> Leaf scope <b>Event</b> count: {{count}} </li> </ul> </li> </ul> </div> <script> var app=angular.module('myApp', []) app.controller('eventCtrl', ['$scope', function($scope) { $scope.count = 0; $scope.$on('Event', function() { $scope.count++; }); }]); </script> </body> </html>
www.wikitechy.com © Copyright 2016. All Rights Reserved.
