JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>
<div single-view-card read-only="true"></div>

JavaScript

angular.module('CrossReference', [])
    .directive('singleViewCard', [function() {
        return {
            restrict: 'AE',
            template: '<div ng-hide="!{{readOnly}}">Lorem ipsum</div>',
            replace:true,
            scope: {
                readOnly:'@'
            },
            link: {
                pre:function(scope, tElement, tAttrs) {}, 
                post:function(scope, tElement, tAttrs) {}
            }
        };
    }]);