Created
May 15, 2014 13:20
-
-
Save justindujardin/f9cbd011498a78fdcfbd to your computer and use it in GitHub Desktop.
Using Typescript Classes with Angular Directives
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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"; | |
| } | |
| }; | |
| }]); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment