JSFiddle - React, Tailwind, and code Playground

by Axel Duch

HTML

<div ng-app="CrossReference">
    <div ng-controller="ctrl">
        <form>
            <fieldset>
                <legend>Controls</legend>
                <label>Toggle me to show/hide text:
                    <input type="checkbox" ng-model="ctrlReadOnly" />
                </label>
            </fieldset>
        </form>
        
        <div single-view-card read-only="ctrlReadOnly"></div>
    </div>
</div>

JavaScript

angular.module('CrossReference', [])
    .directive('singleViewCard', [function () {
    return {
        restrict: 'A',
        template: '<div ng-hide="readOnly">Hidden when readOnly is true</div>',
        replace: true,
        scope: {
            readOnly: '='
        }
    };
}])
    .controller('ctrl', function ($scope) {
        $scope.ctrlReadOnly = false;
    });