Inject $http into TypeScript AngularJS Directive

Question

I'm trying to convert my directive to use TypeScript This is what I have so far

'use strict';

module app.dashboard {       
    export class Safes implements ng.IDirective {

        static $inject = ['$log', '$http', 'storeFactory'];
        static instance($log, $http, storeFactory) {
            return new Safes($log, $http, storeFactory);
        }
        templateUrl = '/app/shared/mocks/table.html';
        restrict :string = 'A';
        scope: any = {
            title: '=',
            rows: '='
        };                
        link: (scope, element, attrs) => void;

        constructor(private $log, public $http: ng.IHttpProvider) {
            this.link = this._link.bind(this);
        }

        _link(scope, element, attrs) {
            this.storeFactory.getSafes().then(success, failure);

            function success(response) {
                scope.safes = response.data.safes;
                localStorage.setItem('safeCount', scope.safes.length);
                this.$http.get('/app/dashboard/safes/safes.html', { cache: this.$templateCache }).success(function (tplContent) {
                    element.replaceWith(this.$compile(tplContent)(scope));
                });
            }
        }
    }
    angular
        .module('app')
        .directive('safes', Safes.instance);
}

When I get into my success function it says Cannot read property '$http' of undefined

What am I doing incorrectly to not access $http ?

Answer 1

When I get into my success function it says Cannot read property '$http' of undefined

This is because you used function :

function success(response) {

You probably meant to use ()=> (arrow function) which would preserve this context for you.

More : https://basarat.gitbooks.io/typescript/content/docs/arrow-functions.html