JSFiddle - React, Tailwind, and code Playground

by GruffBunny

HTML

<div ng-app='MyModule' ng-controller="MyController">
    <my-directive label='Last name' identifier="person.lname"></my-directive>
    <my-directive label='First name' identifier="person.fname"></my-directive>
    <p>{{person | json}}</p>
</div>

JavaScript

angular.module('MyModule', [])

.controller('MyController', function( $scope ) {
    $scope.person = {
        fname: 'bobby',
        lname: ''
    };
})

.directive('myDirective', function() {
  return {
    scope: {
      model: '=identifier',
      id: '@identifier',
      label: '@',
    },
    restrict: 'E',
      template: '<label for="{{id}}">{{label}}</label><input id="{{id}}" name="{{id}}" ng-model="model">'
  };
});