JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
    <ui type="backbutton" x="600" y="630.0" ></ui>
    <ui type="go_button"> </ui>
</div>

CSS

.backbutton { border: 1px solid red; }

JavaScript

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

app.directive('ui',function($compile){
  return {
    restrict:'E',
    compile:function($tElement,$tAttrs){
        console.log("hi there");
      var el = $tElement[0];
      if(el.getAttribute('type')){
        el.removeAttribute('type');
        el.setAttribute($tAttrs.type,'');
        return function(scope){
          $compile(el)(scope);
        }
      }

    }  
  }
});


app.directive('backbutton',function($compile){
  return {
    restrict: 'A',
    replace:true,
    scope: {
        x: '@',
        y: '@'
    },
    template:'<button style="width: {{x}}px; height: {{y}}px">A back-button template</button>',
      link: function (scope, element, attrs) {
          element.removeAttr('x').removeAttr('y');
      }
  }
});