<!DOCTYPE html>
<html ng-app="baconDemo">
<head>
<script data-require="angular.js@1.2.16" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bacon.js/0.7.10/bacon.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/lauripiispanen/angular-bacon/master/dist/angular-bacon.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<p ng-controller="baconCtrl">
<button ng-click="shouldBlink = !shouldBlink">Blink: {{shouldBlink}}</button>
<blink>This should blink</blink>
This shouldn't
<blink>This should blink, too</blink>
</p>
</body>
</html>
angular.module( 'baconDemo', ['angular-bacon'] )
.controller( 'baconCtrl', function($scope) {
$scope.shouldBlink = true;
shouldBlinkProp = $scope.$watchAsProperty('shouldBlink');
var tickStream = Bacon.interval(500, 1)
.filter(shouldBlinkProp);
var aggregator = function(aggregate, tick) {
return aggregate !== tick ? 1 : 0
}
var ticktackProp = tickStream.scan(0, aggregator);
var toVisibility = function(ticktackVal) {
return ticktackVal ? {visibility:'visible'} : {visibility: 'hidden'};
};
var blinkProp = ticktackProp
.map(toVisibility);
ticktackProp.digest($scope, 'ticktack');
blinkProp.digest($scope, 'blinkCss');
})
.directive( 'blink', function() {
return {
restrict: 'E',
transclude: true,
template: '<div ng-style="blinkCss" ng-transclude></div>',
}
})
;
/* Styles go here */