title: How to bind attributes in an Angular directive using TypeScript?
body: <p>Using AngularJS 1.5 and TypeScript I am writing a directive and want to define an attribute in my view that gets passed into the directive and then used to output to a template. I have tried to follow some examples such as <a href="https://hstefanski.wordpress.com/2015/08/19/converting-an-angular-app-to-typescript-part-2/" rel="nofollow">this one</a>, but my directive template isn't binding to the attribute. </p>
  
  <p>HTML from page:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;my-directive name="John"&gt;&lt;/my-directive&gt;
  </code></pre>
  
  <p>Directive:</p>
  
  <pre><code>module myApp.directives {
      "use strict";
  
      export class myDirective {
        static directiveId = 'myDirective';
        scope = {};
        bindToController = {
          name: '='
        };
        restrict = 'EA';
        controller = controllers.NameController.ControllerId;
        controllerAs = 'vm';
        template = '&lt;h1&gt;Name: {{ vm.name }}&lt;/h1&gt;';
  
        static $inject = [];
        constructor() { }
  
        static instance() {
          return new myDirective();
        }
      }
      angular.module("myApp").directive(myDirective.directiveId, myDirective.instance);
  }
  </code></pre>
  
  <p>Controller (not really sure I need anything in the constructor?):</p>
  
  <pre><code>module myApp.controllers {
      "use strict";
  
      export class NameController {
          static ControllerId = "NameController";
          name: string;
  
          constructor(name: string){
              this.name = name;
          }
      }
  
      angular.module("myApp").controller(NameController.ControllerId, NameController);
  }
  </code></pre>