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">
    Every time you click on a symbol, it should popup an alert printing 2 or -2
    <div ng-controller="MainCtrl">

         <br/>
         <br/>
        Handled directly by MainCtrl
        <div class="link" ng-click='onClick(2)'>&lt;&lt;</div>
        
         <br/>
         <br/>
        Handled by custom directive
        <br/>
        <date-nav on-tap='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='onTap()'> &lt;&lt; </span>";

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

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