JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="test">
    <div switch-directive="" payload="true"></div>
</div>

CSS

.with-payload,
.without-payload {
    height: 50px;
    width: 50px;
    background-color: blue;
}

JavaScript

angular.module("test", []);
angular.module("test", []).directive("switchDirective", function(){
    return {
        scope: {
            payload: '='
        }
        controller: function($scope) {
            $scope.havePayload = payload
        }
        link: {
            post: function(scope, elem, attrs) {
                 elem.children(".with-payload").   
            }
        }
        restrict: 'A',
        replace: true,
        template: '<div ng-switch on="havePayload"> \n
                        <div ng-switch-when="true" class="with-payload"></div> \n
                        <div ng-switch-when="false" class="without-payload"></div> \n
                    </div>'
    }
});