justindujardin/tsClassInjectedController.html

## tsClassInjectedController.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>Using Typescript Classes with Angular Directives</title>
</head>
<body ng-app="yourApp">
  <custom-directive ng-click="ctrl.clear()">{{text}}</custom-directive>
</body>
</html>

## tsClassInjectedController.ts
module MyApp {
  declare var angular;
  var app = angular.module('yourApp',[]);
  class CustomDirectiveController {
     static $inject:string[] = ['$rootScope'];
     constructor(public $rootScope:any){}
     clear(){
       this.$rootScope.text = '';
     }
  }
  app.directive("customDirective", [ "$rootScope", ($rootScope) => {
     return {
        restrict: "E",
        controller:CustomDirectiveController,
        controllerAs:'ctrl',
        link:(scope,element,attributes,ctrl:CustomDirectiveController) => {
           ctrl.$rootScope.text = "Injected $rootScope properly into controller class";
        }
     };
  }]);
}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
	<meta charset="utf-8">
	<title>Using Typescript Classes with Angular Directives</title>
	</head>
	<body ng-app="yourApp">
	<custom-directive ng-click="ctrl.clear()">{{text}}</custom-directive>
	</body>
	</html>
	module MyApp {
	declare var angular;
	var app = angular.module('yourApp',[]);
	class CustomDirectiveController {
	static $inject:string[] = ['$rootScope'];
	constructor(public $rootScope:any){}
	clear(){
	this.$rootScope.text = '';
	}
	}
	app.directive("customDirective", [ "$rootScope", ($rootScope) => {
	return {
	restrict: "E",
	controller:CustomDirectiveController,
	controllerAs:'ctrl',
	link:(scope,element,attributes,ctrl:CustomDirectiveController) => {
	ctrl.$rootScope.text = "Injected $rootScope properly into controller class";
	}
	};
	}]);
	}