AngularJS | Reusable form directives

AngularJS reusable form directives, more details www.shanidkv.com

by Shanid

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="panel panel-default">
  <div class="panel-body">
    <div class="panel panel-default">
      <div class="panel-heading">Form Directives</div>
      <div class="panel-body">
        <form role="form">
          <input-directive label="Name" type="text" required="true"></input-directive>
          <input-directive label="Email" type="email" required="true"></input-directive>
          <input-directive label="Age" type="number" required="true"></input-directive>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>

JavaScript

var app = angular.module('myApp', []);

app.directive('inputDirective', function() {
    return {
        restrict: 'E',
        scope:{
        	label: '@',
          type: '@',
          required: '@',
        },
        template: '<div class="form-group"><label>{{label}}</label><input type="{{type}}" class="form-control" ng-required="{{required}}"></div>',
        link: function(scope, elm, attrs) {
            console.log(elm.text());                       
        }
    };
});