TypeError：$ compile不是函数

Question

I am writing a AngularJS directive in typescript. Here is my code, in browser error thrown like this TypeError: $compile is not a function at compileComponent.js:14

But TS compiler not showing any error.

module dashboard {
  function CompileComponent($compile): ng.IDirective {
    console.log('Compiler s--');

    return {
      replace: false,
      restrict: 'EA',
      link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ngModel: any) => {
        scope.$watch(
          function (scope) {
            return scope.$eval(attrs.compile);
          },
          function (value) {
            element.html(value);
            $compile(element.contents())(scope);
          }
        );
      }
    }
  }
  var dragdropModule = angular.module('dashboard');
  dragdropModule.directive("compileComponent", [CompileComponent]);
}

Answer 1

Try to implemented it like that :

 class CompileComponent implements ng.IDirective {
        restrict = 'A';
        require = 'ngModel';
        templateUrl = 'myDirective.html';
        replace = true;
enter code here
    link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrl: any) => {
 // do something
}

static factory(): ng.IDirectiveFactory {
    const directive = ($compile: ng.ICompileService) => new CompileComponent($compile);
    directive.$inject = ['$compile'];
    return directive;
}
        constructor(private $compile: ng.ICompileService) {
        }
     }
    app.directive('compileComponent', CompileComponent.factory());

Answer 2

我弄错了，我忘了注入$ compile

dragdropModule.directive("compile", ["$compile", CompileComponent]);