JSFiddle - React, Tailwind, and code Playground

by redaemn

HTML

<div ng-app="directives" ng-controller="ctrl">

<div class="button" data-ng-click="back()">
    <div class="buttonLeft" ></div>
    <div class="buttonCenter" >&lt; Back</div>
    <div class="buttonRight" ></div>
</div>

<div class="button" data-ng-click="goBack()">
    <div class="buttonLeft" ></div>
    <div class="buttonCenter" >Next &gt;</div>
    <div class="buttonRight" ></div>
</div>


    <div my-button>
        <b>New Button 4</b>
    </div>

<div my-button ng-click="back()">New Button 3</div>
    
</div>

CSS

.button {
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
}

.button.disabled {
    color: #ccc;
}

.buttonLeft {
    width: 3px;
    height: 26px;
    float: left;
    background-color: red;
}

.buttonCenter {
    height: 26px;
    float: left;
    padding: 0 8px;
    line-height: 25px;
    background-color: yellow;
}

 .buttonRight {
    width: 3px;
    height: 26px;
    float: left;
    background-color: blue;
}

JavaScript

angular.module('directives', []).
    directive('myButton', function() {
        
        return {
            restrict: 'A',
            
            transclude: true,
            
            template: '<div class="buttonLeft" ></div>' +
                      '<div class="buttonCenter" ng-transclude></div>' +
                      '<div class="buttonRight" ></div>',
            
            link:  function link($scope, $element, $attrs, $controller) {
                $element.addClass('button');
            }
            
        };
        
    });


function ctrl($scope) {
    
    $scope.back = function() {
        alert('back');
    };
    
}