JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app='app'>
    <div my-directive my-one="value one" my-three="value three" my-four="value four"/>
</div>

JavaScript

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

app.directive('myDirective', function() {
    return {
        // You can copy all of the attributes into the scope
        scope : {
            one : '@myOne',
            two: '@myTwo',
            three: '@myThree'
        },
        
        template: '<p>One = {{one}} // Passed as my-one</p><p ng-show="two">Two = {{two}} // Passed as my-two hidden when missing</p><p>Three = {{three}} // Passed as my-three</p><p>Four = {{four}} // set in the controller<p>',
        
        controller: function($scope, $element, $attrs){
            // Or you can copy them from $attrs in the controller
            $scope.four = $attrs.myFour || 'Fourth value is missing';
        }
      }
    });