Question

我正在构建一个应该接受html文件的指令，将它放在dom中并使用angular＆＃c编译来编译它

我收到错误：

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

}

Answer 1

这里的要点是： link 功能是不是 IoC的一部分。查看此doc部分：

Creating a Directive that Manipulates the DOM

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

想要修改DOM的指令通常使用link选项来注册DOM侦听器以及更新DOM。它在克隆模板后执行，并且将放置指令逻辑。

link使用以下签名函数，函数链接（范围，元素，attrs，controller，transcludeFn）{...}，其中：


scope是一个Angular范围对象。

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

attrs是一个哈希对象，具有标准化属性名称的键值对及其对应的属性值。

controller是指令所需的控制器实例或它自己的控制器（如果有的话）。确切的值取决于   指令的要求财产。

transcludeFn是一个预先绑定到正确的转换范围的转换链接函数。

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

Answer 2

link的第二个参数 - 函数是元素。如果您尝试注入$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 );

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

2 个答案:

Creating a Directive that Manipulates the DOM