JSFiddle - React, Tailwind, and code Playground

by milmly

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.0.9/css/foundation.min.css">
<div ng-controller="appCtrl">
    <div class="panel">
        Id: {{ model.id }}<br>
        Name: {{ model.name }}<br>
        Controller formController: {{ form }}<br>
        Directive formController: {{ myForm }}<br>
    </div>
    <form name="form" class="panel">
        <input type="text" ng-model="model.name">
    </form>
        
    <button ng-click="modal.show=!modal.show">toggle dialog</button>

    <div modal show="modal.show">
        <form name="myForm">
            <input type="text" ng-model="model.name">
        </form>
    </div>
</div>

CSS

.reveal-modal {
    display: block;
    visibility: visible;
}

JavaScript

var app = angular.module('app', []);
app.controller('appCtrl', function ($scope) {
    $scope.model = {
        id: 1,
        name: 'John'
    };
    $scope.modal = {
        show: false
    };
});
app.directive('modal', function () {
    return {
        scope: {
            show: '='
        },
        transclude: true,
        replace: true,
        template: '<div class="reveal-modal small" ng-show="show"><div class="panel" ng-transclude></div></div>'
    };
});