JSFiddle - React, Tailwind, and code Playground

by marco_m_alves

HTML

<script src="http://code.angularjs.org/1.0.0rc5/angular-1.0.0rc5.js"></script>
<div ng-app="test">
   
    <div ng-controller="MainCtrl">
        <date-nav 
            rwd-two='onClick(-2)'
            rwd-one='onClick(-1)'
            fwd-one='onClick(1)'
            fwd-two='onClick(2)'>
        </date-nav>
        
        
    </div>
</div>

CSS

.link { color: blue; cursor: pointer;}
.link:hover { color: #06c; text-decoration: underline;}

JavaScript

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

var tmpl = "<span class='link' ng-click='rwdTwo()'>&lt;&lt;</span> <span class='link' ng-click='rwdOne()'>&lt;</span> <span class='link' ng-click='fwdOne()'>&gt;</span> <span class='link' ng-click='fwdTwo()'>&gt;&gt;</span>";

app.directive('dateNav', function() {
    return {
        restrict: 'E',
        scope: {
            rwdTwo: 'expression',
             rwdOne: 'expression',
             fwdOne: 'expression',
            fwdTwo: 'expression'
        },
        template: tmpl
    }
});

function MainCtrl($scope) {
    $scope.onClick = function(n) {
        window.alert(n);
    };
}