JSFiddle - React, Tailwind, and code Playground

by Daan De Smedt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.15.1/angular-translate.min.js"></script>
<!-- application container -->
<div ng-app="app">

  <!-- directive view template -->
  <script type="text/ng-template" id="foobar.html">
    {{origId}}
    <div class="row">
      <div class="col-md-12">
        <label for="foobar_{{$id}}" ng-disabled=true " class="foobar_{{::$id}} " translate="foobar "></label>
        <br />
        <span class="label label-danger foobar_{{::$id}} " translate="foobarWarning "></span>
        <br />
        <textarea id="foobar_{{::$id}} " auto-height type="text " class="form-control " ng-model="scope.model.foobar " placeholder="id : foobar_{{::$id}} " ng-disabled="false">
          </textarea>
          <br/>
          <strong>Model:</strong> {{scope.model}}

      </div>
    </div>
  </script>

  <foobar-directive></foobar-directive>
  <br/>
  <foobar-directive></foobar-directive>

</div>

JavaScript

angular
.module('app', ['pascalprecht.translate'])

.directive('foobarDirective', function() {
  return {
    restrict: 'E',
    scope : {},
    templateUrl: 'foobar.html',
    link: function(scope, element, attrs) {
    	console.log('linked' , scope.$id);
      scope.origId = scope.$id;
    }
  }
});