JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div data-ng-app="app">
    <form data-ng-controller="ParentCtrlCheckbox" class="checkbox">
        <!--A = atribute-->
        <input type="checkbox" checkboxstyling="" name="checkbox1" value="checkbox1" title="inlineTitle" data-facetresults="inlineFacetresults" data-ng-model="ckeckboxModel"/>
        <input type="checkbox" checkboxstyling="" name="{{name}}" value="checkbox2" title="{{title}}" data-facetresults="{{facetresults}}" data-ng-model="ckeckboxModel"/>
        
       
    </form>
    <form data-ng-controller="ParentCtrlRadio" class="radio">
        <!--A = atribute-->
        <input type="radio" radiostyling="" value="radio1" name="radio1" title="inlineTitle1" data-ng-model="radioModel"/>
        <input type="radio" radiostyling="" value="radio2" name="radio1"  title="{{title}}" data-ng-model="radioModel"/>
        
        
    </form>
</div>

CSS

.checked{background:green;}
.unchecked{background:#ccc;}

JavaScript

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

thisApp.directive('checkboxstyling', function() {
    checkboxTemplate =
        '<label class="checkbox">' +
            '<input type="checkbox" ng-model="ckeckboxModel" id="{{title}}" name="{{name}}">' +
            '<span ng-class="{\'checked\': ckeckboxModel, \'unchecked\': !ckeckboxModel}"> {{title}} </span>' +
            '<i class="facetResults">({{facetresults}})</i> ' +
        '</label>';
    return {
        restrict: 'A', //Attr
//        restrict: 'E', //Element
        replace: true,
//        transclude: true,
        template: checkboxTemplate,
        link: function(scope, element, attrs, controller) {
           // element.bind('click', function() {
                scope.$apply(function(){
                    scope.value = !scope.value;
                });
            //});
        },
        scope: {
            value: '@value',
            title: '@title',
            name: '@name',
            facetresults: '@facetresults'
        }
    }
});

function ParentCtrlCheckbox($scope){
    $scope.ckeckboxModel = true;
    $scope.title = "ctrlTitle";
    $scope.name = "mynameis";
    $scope.facetresults = "ctrlFacetresults";
}


thisApp.directive('radiostyling', function() {
    radioTemplate =
        '<label class="radio">' +
            '<input type="radio" ng-model="radioModel" id="{{title}}" name="{{name}}" value="{{value}}">' +
            '<span ng-class="{\'checked\': radioModel, \'unchecked\': !radioModel}"> {{title}} </span>' +
            '</label>';
    return {
        restrict: 'A', //Attr
        replace: true,
        template: radioTemplate,
        link: function(scope, element, attrs, controller) {
            //element.bind('click', function() {
                scope.$apply(function(){
                    scope.value = !scope.value;


                });
           // });
        },
        scope: {
            value: '@value',
            title: '@title',
            name: '@name'
      ...