<html lang="en" ng-app="demoDirectives">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body ng-controller="Controller">  

  <div class="container-fluid" ng-controller="Controller">
    <div class="row trifork-blog">
      <div class="col-md-8">
        <h1 class="pull-left">Element directive</h1>
      </div>
      <div class="col-md-4">
        <img src="data:image/jpeg;base64,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" width="150" class="pull-right" />
      </div>
    </div>
		    <div class="row">
			      <div class="col-md-12">
        <mynput label="Input text" input="field1" typ="text"></mynput>
  					      <mynput label="Input radio" input="field2" typ="radio"></mynput>
  					      <mynput label="Input checkbox" input="field3" typ="checkbox"></mynput>
  				  </div>
  </div>
  
</body>
</html>
html {
  width: 100%;
  height: 100%;

  body {
    background: url('data:image/jpeg;base64,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');
  
    .row {
      padding: 25px 15px;

      &.trifork-blog {
        background: url('data:image/jpeg;base64,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');

        padding: 15px 7px 7px 7px;
        
        h1 {
          color: #fff;
          margin: 0;
          padding: 0;
          font-size: 20px;
        }
      }
    }
  }
}
View Compiled
/**
* Defining your Angular Application
*/

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

/**
* Defining a controller for your application
*/
app.controller('Controller', ['$scope', function($scope) {
  $scope.info = {
    firstName: 'John',
    lastName: 'Doe',
    company: 'Trifork'
  };
}]);

/**
* Defining the parameterless attribute directive
*/
app.directive('mynput', function() {
  return {
 	restrict: 'E',
 	scope: { 
 		labeltext: '@label',
 		inputname: '@input',
 		inputtype: '@typ'
 	},
 	template: '<label for="mynput_{{ inputname }}">{{ labeltext }}</label><br/><input id="mynput_{{ inputname }}" name="{{ inputname }}" type="{{ inputtype }}" /><br/>'
  }
});
Run Pen

External CSS

  1. https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js