feat(directive): support class syntax in TypeScript

Closes #316 When using controllerAs syntax use class syntax for directives in TypeScript.
dustinspecker · Jun 14, 2016 · 5c6cba6 · 5c6cba6
1 parent ca02595
commit 5c6cba6
Showing 1 changed file with 38 additions and 27 deletions.
diff --git a/lib/directive/templates/_directive.ts b/lib/directive/templates/_directive.ts
@@ -1,6 +1,37 @@
 ///<reference path='<%= referencePath %>' />
 module <%= upperCamel %> {
-  'use strict';
+  'use strict';<% if (!controllerAs) { %>
+  interface I<%= upperCamel %>Scope extends ng.IScope {
+    <%= lowerCamel %>: any
+  }<% } %>
+
+  function <%= upperCamel %>Directive(): ng.IDirective {
+    return {
+      restrict: 'EA',
+      scope: {}<% if (directiveTemplateUrl) { %>,
+      templateUrl: '<%= templateUrl %>/<%= hyphenName %>-directive.tpl.html'<% } else { %>,
+      template: '<div>{{<%= lowerCamel %>.name}}</div>'<% } %>,
+      replace: false,<% if (controllerAs) { %>
+      controllerAs: '<%= lowerCamel %>',<% } %>
+      controller: <% if (!controllerAs) { %>function($scope: I<%= upperCamel %>Scope): void {
+          $scope.<%= lowerCamel %> = {};
+          $scope.<%= lowerCamel %>.name = '<%= lowerCamel %>';
+      },<% } else { %><%= upperCamel %>Controller,<% } %>
+      link: function (scope: ng.IScope, element: JQuery, attrs: any): void {
+        /*jshint unused:false */
+        /*eslint "no-unused-vars": [2, {"args": "none"}]*/
+      }
+    }
+  }<% if (controllerAs) { %>
+
+  export class <%= upperCamel %>Controller {
+    public name: string;
+    public static $inject: Array<string> = [];
+
+    constructor() {
+      this.name = '<%= lowerCamel %>';
+    }
+  }<% } %>
 
   /**
   * @ngdoc directive
@@ -11,34 +42,14 @@ module <%= upperCamel %> {
   * @description
   *
   * @example
-    <example module="<% if (parentModuleName) { %><%= parentModuleName %>.<% } %><%= moduleName %>">
-      <file name="index.html">
-        <<%= hyphenName %>></<%= hyphenName %>>
-      </file>
-    </example>
+  *   <example module="<% if (parentModuleName) { %><%= parentModuleName %>.<% } %><%= moduleName %>">
+  *       <file name="index.html">
+  *           <<%= hyphenName %>></<%= hyphenName %>>
+  *       </file>
+  *   </example>
   *
   */
   angular
     .module('<% if (parentModuleName) { %><%= parentModuleName %>.<% } %><%= moduleName %>')
-    .directive('<%= lowerCamel %>', <%= lowerCamel %>);
-
-  function <%= lowerCamel %>(): ng.IDirective {
-    return {
-      restrict: 'EA',
-      scope: {}<% if (directiveTemplateUrl) { %>,
-      templateUrl: '<%= templateUrl %>/<%= hyphenName %>-directive.tpl.html'<% } else { %>,
-      template: '<div>{{<%= lowerCamel %>.name}}</div>'<% } %>,
-      replace: false,<% if (controllerAs) { %>
-      controllerAs: '<%= lowerCamel %>',<% } %>
-      controller: function (<% if (!controllerAs) { %>$scope: ng.IScope<% } %>) {
-        <% if (controllerAs) { %>var vm = this;
-        vm.name = '<%= lowerCamel %>';<% } else { %>$scope.<%= lowerCamel %> = {};
-        $scope.<%= lowerCamel %>.name = '<%= lowerCamel %>';<% } %>
-      },
-      link: function (scope: ng.IScope, element: JQuery, attrs: any) {
-        /*jshint unused:false */
-        /*eslint "no-unused-vars": [2, {"args": "none"}]*/
-      }
-    };
-  }
+    .directive('<%= lowerCamel %>', <%= upperCamel %>Directive);
 }