在 angular + typescript 中使用 templateRequest（$templateRequest 不是函数）答案

【问题标题】：Using templateRequest in angular + typescript ($templateRequest not a function)在 angular + typescript 中使用 templateRequest（$templateRequest 不是函数）
【发布时间】：2016-01-12 10:54:03
【问题描述】：

我正在构建一个指令，它应该采用 html 文件，将其放在 dom 中并使用 angular 的 compile 对其进行编译

我收到一个错误：

$templateRequest 不是函数

显然我做错了什么，不知道是什么，

这是我的指令：

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 **********

}

【问题讨论】：

标签： angularjs angularjs-directive typescript

【解决方案1】：

这里的重点是：link 函数不是 IoC 的一部分。检查此文档部分：

Creating a Directive that Manipulates the DOM

在本例中，我们将构建一个显示当前时间的指令。它每秒更新一次 DOM 以反映当前时间。

想要修改 DOM 的指令通常使用链接选项来注册 DOM 侦听器以及更新 DOM。它在模板被克隆后执行，是放置指令逻辑的地方。

link 采用具有以下签名的函数，function link(scope, element, attrs, controller, transcludeFn) { ... }，其中：

scope 是一个 Angular 范围对象。

element 是该指令匹配的 jqLite 包装元素。

attrs 是一个哈希对象，其中包含规范化属性名称及其对应属性值的键值对。

controller 是指令所需的控制器实例或它自己的控制器（如果有）。确切的值取决于指令的 require 属性。

transcludeFn 是一个嵌入链接函数，预先绑定到正确的嵌入范围。

所以，要走的路是 - 使用 controller。这可以使用 IoC，并且只提供我们将要求的参数......

【讨论】：

【解决方案2】：

link-function 的第二个参数是元素。如果您尝试注入 $templateRequest 和 $compile，则需要在构造函数中进行：

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) }]);

我建议在处理像指令函数这样的工厂函数时使用函数。关注this结构：

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 );

【讨论】：