title: Angular 1.5 Custom directive to Component
body: <p>I've upgraded to Angular 1.5 which now supports the <code>.component()</code> helper method in the efforts to help users transition to AngularJs 2. Unfortunately there are not many tutorials out there on it. I have the following simplified custom directive and template URL. Can anyone help me write this in <code>.component()</code> form? By doing this I should get the basics of it and and should be able to use it for more complex directives. Thanks in advance. </p>
  
  <p><strong>DIRECTIVE</strong></p>
  
  <pre><code>angular.module("formText", [])
  .directive("formText",['$http','formService','$mdDialog', function($http,formService,$mdDialog){
  
      return{
  
                  scope:{headId:'&amp;',view:'='},
                  link: function(scope,element,attrs){ 
                      scope.show = false;
                      scope.formService = formService;
  
                      scope.$watch('formService', function(newVal) {
                          scope.content = formService.getContent();                       
                      });
                  },
                  restrict:"E", 
                  replace:true,
                  templateUrl:"partials/form/tpl/element/text.html",
                  transclude:true
              }//return
  }])
  </code></pre>
  
  <p><strong>TEMPLATE URL</strong></p>
  
  <pre><code>&lt;div layout='column' flex&gt;
       &lt;md-input-container class="md-block" ng-if="view=='DRAFT'"&gt;
          &lt;label&gt;{{label()}}&lt;/label&gt;
          &lt;textarea style="border-bottom-color:#FFFFFF;" ng-model="content.value" columns="1" &gt;&lt;/textarea&gt;
        &lt;/md-input-container&gt;
        &lt;md-input-container class="md-block" ng-if="view=='READ'"&gt;
          &lt;label&gt;{{label()}}&lt;/label&gt;
          &lt;textarea style="border-bottom-color:#FFFFFF;" ng-model="content.value" columns="1" readonly&gt;&lt;/textarea&gt;
        &lt;/md-input-container&gt;
        &lt;ng-transclude&gt;&lt;/ng-transclude&gt;
  &lt;/div&gt;
  </code></pre>