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>


<html 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>
</html>

CSS

.link { color: blue; cursor: pointer; background-color: whitesmoke; }
.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',
    transcluded: true,
    scope: {
        onTap: 'exp'
    },
    template: tmpl
  }
});

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