Angular Event Handling

Angular Event Handling

by Marko Keuschnig

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<div ng-app="">
    <div ng-controller="MyCtrl">{{message}}
        <br/>
        <input ng-model="message" />
        <br/>
        <button ng-click="raiseEvent(message)">Raise Event</button>
    </div>
</div>

JavaScript

function MyCtrl($scope, $rootScope) {
    $scope.message = "Text";

    $scope.raiseEvent = function (message) {
        $rootScope.$broadcast('handleBroadcast', message);
    };

    $scope.$on('handleBroadcast', function (event, message) {
        $scope.message = "Message: " + message;
    });
}