JSFiddle - React, Tailwind, and code Playground

by hhcofcmds

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="app">
  <form style="width: 40%; margin: auto; margin-top: 20px">
    <name-email name="name" email="email"></name-email>
    {{name}} - {{email}}
  </form>
</div>

JavaScript

var NameEmailDirective = function() {
  var directive = {};
  directive.restrict = 'E';
  directive.template = nameEmailTemplate;
  directive.scope= { 'name': '=', 'email': '='}
  return directive;
}
var nameEmailTemplate = '<div class="form-group">\
<label>Name</label>\
<input type="text" class="form-control" ng-model="name">\
</div>\
<div class="form-group">\
<label>Email</label>\
<input type="text" class="form-control" ng-model="email">\
</div>\
';

angular.module('app', [])
.directive('nameEmail', NameEmailDirective);