JSFiddle - React, Tailwind, and code Playground

by samu_eyes

HTML

<div ng-app="app" ng-controller="AppCtrl">
  <columnwrapper onsort="test">
      <sort-column sortby="Name">Name</sort-column>
      <sort-column sortby="DateCreated">Date Created</sort-column>
  </columnwrapper>
</div>

JavaScript

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

app.controller("AppCtrl", function($scope) {
    $scope.test = function() {
      alert("Called AppCtrl.$scope.test!");
    }
});

app.directive("columnwrapper", function() {
    return {
        restrict: "E",
        scope: {
            onsort: '='
        }       
    };
});

app.directive("sortColumn", function() {
    return {
        restrict: "E",
        replace: true,
        transclude: true,
        scope: {
            sortby: "@",
            onsort: "="
        },
        template: "<span><a href='#' ng-click='sort()' ng-transclude></a></span>",
        link: function(scope, element, attrs) {
            scope.sort = function () {
                scope.$parent.onsort();               
            };
        }
    };
});