JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">

    <ui type="backbutton" x="10.0" 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,
    template:'<button>A back-button template</button>',
   /*   compile: function($tElement, $tAttrs) {
            console.log("button template attrs:", $tAttrs);
           */
            /*var el = $tElement[0];
            angular.forEach($tAttrs, function(value, key) {
                if (value != 'subscreen') {
                    el.removeAttribute(value);
                }
                console.log(key + ': ' + value);
            });*/
           // var el = $tElement[0];
             //el.getAttribute('width');
           //  el.removeAttribute('width');
            /* el.setAttribute($tAttrs.type, '');*/
         /*    return function(scope) {
             $compile(el)(scope);
             };*/
        }
  }
});