JSFiddle - React, Tailwind, and code Playground

by Jamseer Noordeen

HTML

<div ng-controller="myCtrl">
    <div><span>MyForm</span>
        <div my-form my-model="formModel">
            <label for='firstName'>First Name</label>
            <input my-form-name id="firstName"></input>
            <br/>
            <label for='lastName'>Last Name</label>
            <input my-form-name id="lastName"></input>
        </div>
        <div>{{ formModel }}</div>
    </div>
</div>

JavaScript

angular.module('myApp', []).controller('myCtrl', function ($scope) {
    $scope.formModel = {
        name: 'foo',
        email: '[email protected]'
    };
})
    .directive('myForm', function ($compile) {
    return {
        replace: true,
        transclude: true,
        scope: { models:'=myModel'},
        template: '<div ng-form novalidate><div ng-transclude></div></div>',
        controller: function ($scope, $element, $attrs) {
            this.compile = function (element) {
                $compile(element)($scope);
            };
        }
    };
})
    .directive('myFormName', function () {
    return {
        require: '^myForm',
        scope: false,
        compile: function (element, attrs) {
            element.attr('ng-model', 'models.' + attrs.id);
            return function(scope, element, attrs, parentCtrl) {
                parentCtrl.compile(element);
                
            };
        }
    };
});