AngularJS Example

for http://stepansuvorov.com/blog/

by Stepan Suvorov

HTML

<div ng-controller="mainController">
    mainController <span>{{ log }}</span>
    <div ng-controller="userController">
        userController <span>{{ log }}</span>
        <button ng-click="emitEvent()"> emit Event </button>
        <button ng-click="broadcastEvent()"> broadcast Event </button>
        <div ng-controller="nameController">
            nameController  <span>{{ log }}</span>
        </div>
    </div>
</div>

CSS

div {
    border: 1px dashed black;
    margin: 5px;
}

span {
    color: red;
    opacity: .5;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { opacity: .5; }
    50% { opacity: 0.0; }
    100% { opacity: .5; }
}

@-webkit-keyframes blinker {  
    0% { opacity: .5; }
    50% { opacity: 0.0; }
    100% { opacity: .5; }
}

@keyframes blinker {  
    0% { opacity: .5; }
    50% { opacity: 0.0; }
    100% { opacity: .5; }
}

JavaScript

var app = angular.module('foo', [])

app
.controller('mainController', function ($scope, $timeout) {
    $scope.log = '';
    $scope.$on('myevent', function(){
        $scope.log = 'caught myevent';
        $timeout(function(){
            $scope.log = '';
        }, 1000);
    });
})
.controller('userController', function ($scope, $timeout) {
    $scope.log = '';
    $scope.$on('myevent', function(){
        $scope.log = 'caught myevent';
        $timeout(function(){
            $scope.log = '';
        }, 1000);
    });
    
    $scope.emitEvent = function() {
        var data  = { x: 5 };
        $scope.$emit('myevent', data);
    }
    
    $scope.broadcastEvent = function() {
        var data  = { y: 10 };
        $scope.$broadcast('myevent', data);
    }
})
.controller('nameController', function ($scope, $timeout) {
    $scope.log = '';
    $scope.$on('myevent', function(){
        $scope.log = 'caught myevent';
        $timeout(function(){
            $scope.log = '';
        }, 1000);
    });
});