JSFiddle - React, Tailwind, and code Playground

by ikaruss

HTML

<div ng-app="kalah" ng-controller="KalahCtrl">
    <pit sow="test()" />
</div>

CSS

.pit {
    color:red;
}

JavaScript

/* AngularJS directive - pit test */

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

app.controller('KalahCtrl', function($scope){
    $scope.test = function(){
        console.log('testing...'); // see console
    };
});

app.directive('pit', function(){
    return {
        //priority: 0,
        template: '<div class="pit" ng-click="test()">pit (click me)</div>',
        //templateUrl: 'directive.html',
        replace: true,
        //transclude: false,
        restrict: 'E',
        scope: {
            test: '&sow'
        },
        /*
        controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) { ... },
                post: function postLink(scope, iElement, iAttrs, controller) { ... }
            }
        },
        link: function (scope, iElement, iAttrs) {
        }
        */
    };
});