Using templateRequest in angular + typescript ($templateRequest not a function)

Question

I'm building a directive which supposed to take html file, place it in dom and compile it with angular's compile

I'm getting an error:

$templateRequest is not a function

Clearly I am doing something wrong, don't know what,

This is my directive:

module Uni.Directives {      

    export class uniTable implements ng.IDirective {

        public restrict: string = 'EA';

        public link: Function = (scope: ng.IScope,
            $templateRequest: ng.ITemplateRequestService,
            $compile: ng.ICompileService,
            element: ng.IAugmentedJQuery,
            attrs: ng.IAttributes) => {

           $templateRequest("template.html",false).then(function (html) {
                var template = angular.element(html);
                element.append(template);
                $compile(template)(scope);
            });
        }
    }

    angular
        .module('TModule')
        .directive('uniTable', [() => { return new Uni.Directives.uniTable() }]);


    // ******** End adding to module **********

}

score 1 · Answer 1 · answered Oct 14 '15 at 11:24

The point here is: the link function is not part of IoC. Check this doc part:

Creating a Directive that Manipulates the DOM

In this example we will build a directive that displays the current time. Once a second, it updates the DOM to reflect the current time.

Directives that want to modify the DOM typically use the link option to register DOM listeners as well as update the DOM. It is executed after the template has been cloned and is where directive logic will be put.

link takes a function with the following signature, function link(scope, element, attrs, controller, transcludeFn) { ... }, where:

scope is an Angular scope object.

element is the jqLite-wrapped element that this directive matches.

attrs is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values.

controller is the directive's required controller instance(s) or it's own controller (if any). The exact value depends on the directive's require property.

transcludeFn is a transclude linking function pre-bound to the correct transclusion scope.

So, the way to go is - to use controller. That could use IoC and will be provided just with arguments we will ask for...

Gustav · Accepted Answer · 2015-10-14T11:35:02.100

The second parameter to link-function is element. If you´re trying to inject $templateRequest and $compile you need to do it in the constructor:

export class uniTable implements ng.IDirective {
    constructor(private $templateRequest: ng.ITemplateRequestService, private $compile: ng.ICompileService){

    }
    public restrict: string = 'EA';


    public link: Function = (scope: ng.IScope,
        element: ng.IAugmentedJQuery,
        attrs: ng.IAttributes) => {

       this.$templateRequest("template.html",false).then(function (html) {
            var template = angular.element(html);
            element.append(template);
            $compile(template)(scope);
        });
    }
}

angular
    .module('TModule')
    .directive('uniTable', ['$templateRequest','$compile',($templateRequest,$compile) => { return new Uni.Directives.uniTable($templateRequest,$compile) }]);

I'd suggest using function when dealing with factory functions like the directive function. Following this structure:

function uniTable($templateRequest: ng.ITemplateRequestService, $compile: ng.ICompileService): ng.IDirective{
   return {
      restrict: 'EA',
      link: function(){
        $templateRequest()//doStuff
      }
   };
}
uniTable.$inject = ['$templateRequest', '$compile'];
angular.module('TModule')
.directive('uniTable', uniTable );

Using templateRequest in angular + typescript ($templateRequest not a function)

2 Answers2

Creating a Directive that Manipulates the DOM

Linked