JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div data-ng-app="app">
        <div data-ng-controller="ParentCtrl">
            <checkboxstyling value="ckeckboxModel" title="inlineTitle" data-facetresults="inlineFacetresults" data-ng-model="ckeckboxModel"> </checkboxstyling>
            <checkboxstyling value="ckeckboxModel" title="{{title}}" data-facetresults="{{facetresults}}" data-ng-model="ckeckboxModel"> </checkboxstyling>



            <checkboxstyling value="ckeckboxModel" title="{{title}}"  data-ng-model="ckeckboxModel"> </checkboxstyling>
            <checkboxstyling value="ckeckboxModel" title="{{title}}" data-facetresults="" data-ng-model="ckeckboxModel"> </checkboxstyling>
        </div>
    </div>

JavaScript

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


thisApp.directive('checkboxstyling', function() {

    if (facetresults = undefined){
        checkboxTemplate =
            '<label class="checkbox">' +
                '<input type="checkbox" ng-model="ckeckboxModel" id="{{title}}" name="{{title}}">' +
                '<span ng-class="{\'checked\': ckeckboxModel, \'unchecked\': !ckeckboxModel}"> {{title}} </span>' +
                '<i class="facetResults">({{facetresults}})</i> ' +
            '</label>';
    }else{
        checkboxTemplate =
            '<label class="checkbox">' +
                '<input type="checkbox" ng-model="ckeckboxModel" id="{{title}}" name="{{title}}">' +
                '<span ng-class="{\'checked\': ckeckboxModel, \'unchecked\': !ckeckboxModel}"> {{title}} </span>' +
            '</label>';
    }

    return {
        restrict: 'E',
        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',
            facetresults: '@facetresults'
        }
    }
});

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