title: Using Angular JS directives to create a domain-specific language for forms (with binding)
body: <p>I'm trying to create a set of DSLs using Angular directives to have dynamic templating for some simple form elements based on data-type. I'm looking for some help in getting the binding to work as well as more theoretical help as to whether or not this is the 'right approach' in terms of best-practices etc...</p>
  
  <p>It might be easier if I show you what I'm trying to achieve as I'm still <em>very</em> green when it comes to Angular.</p>
  
  <p>Example usage code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h2&gt;{{data.title}}&lt;/h2&gt;
  &lt;shorttext label="Title" id="title" /&gt;
  &lt;longtext label="Body" id="body" /&gt;
  &lt;usagerights label="Usage Rights Restriction" id="usageRights" /&gt;
  </code></pre>
  
  <p>Outputted as:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;label for="{{id}}"&gt;{{label}}&lt;/label&gt;
    &lt;input type="text" ng-model="data.{{id}}" /&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for="{{id}}"&gt;{{label}}&lt;/label&gt;
    &lt;textarea ng-model="data.{{id}}"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for="{{id}}"&gt;{{label}}&lt;/label&gt;
    &lt;select id="{{id}}" ng-model="data.{{id}}"&gt;
      &lt;option value=""&gt;None&lt;/option&gt;
      &lt;option value="limited"&gt;Limited&lt;/option&gt;
      &lt;option value="unlimited"&gt;Unlimited&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've had a play and come up with something similar to this:</p>
  
  <pre class="lang-javascript prettyprint-override"><code>var myApp = angular.module("myApp", []).directive('shorttext', function(){
    return {
        restrict: "E",
        replace: true,
        template: "&lt;div&gt;&lt;label for='{{id}}'&gt;{{label}}&lt;/label&gt;&lt;input id='{{id}}' ng-model='data.{{id}}' type='text' class='span6' /&gt;&lt;/div&gt;",
        scope: {
            id: "@id",
            label: "@label"
        }
      };
  });
  </code></pre>
  
  <p>Here's a dummy controller to try to get the scope to work:</p>
  
  <pre class="lang-javascript prettyprint-override"><code>myApp.controller('FormCtrl', ['$scope', function($scope) {
    $scope.data = {title:'test', body:'some text', usageRights:'limited'};
  }]);
  </code></pre>
  
  <p>Part of the reason for wanting to use DSLs in such a way is for legacy compatibility and also for re-usability of the presentation rules for custom fields such as usage-rights.</p>
  
  <p>I'm looking for advice on if this is even a reasonable expectation of the framework, how I'd get the binding to work with ng-model (I've had a look at things like 'compile' that are available on directives, but am a bit out of my depth of what it all really does).</p>
  
  <p><strong>TL;DR: I would like custom form tags that transform into different elements based on directive templates with two-way binding. Advice on implementation greatly appreciated.</strong></p>
  
  <p>Thanks, Gaz</p>