传递给角度指令的链接函数的实例元素参数是啥对象类型？

Posted 2023-03-13

【中文标题】传递给角度指令的链接函数的实例元素参数是啥对象类型？

【英文标题】：What object type is the instance element parameter pass into the link function of an angular directive?传递给角度指令的链接函数的实例元素参数是什么对象类型？

【发布时间】：2014-03-14 07:14:40

【问题描述】：

我正在使用带有角度的打字稿并尝试创建自定义指令。我试图给出我所有的参数类型，但不确定通过 $element 参数传递的对象是什么类型。是 JQuery 类型吗？还是一些元素类型？

在指令代码中，我想将 $element 与 d3 选择器一起使用。 （即 d3.select($element)） 目前 d3 选择语句不起作用，因为 $element 类型不是 d3 所期望的类型。 （我也在为 d3 使用 typescript 接口。）

var directiveDefinitionObject : ng.IDirective = 
        restrict: 'E',
        replace: false,
        scope:  data: '=chartData' ,
        link: ($scope: ICustomScope, $element: <WHAT_TYPE?>) => 
             d3.select($element);  // d3.select(node)
        
    ;

【参考方案1】：

指令的link 函数中的$element 具有ng.IAugmentedJQuery 类型。如果包含 jQuery，那么您将在 $element 上获得 jQuery 函数，如果没有 jQuery，则 Angular 将提供 jqLit​​e。 See here 了解更多信息。

ng.IDirective中的link函数定义为：

link?: (scope: IScope,
        instanceElement: IAugmentedJQuery,
        instanceAttributes: IAttributes,
        controller: any,
        transclude: ITranscludeFunction
       ) => void;

【讨论】：

谢谢！在我的 angular.d.ts 版本中，链接定义实际上是这样的：link?: (scope: IScope, instanceElement: any, instanceAttributes: IAttributes, controller: any ) => void;这就是为什么我无法弄清楚类型。因此，使用 IAugmentedJQuery，我能够让“d3.select($element[0])”正常运行。 $element[0] 是什么类型？有没有办法从 IAugmentedJQuery 的定义中看出？

我应该澄清我的问题。我对 IAugmentedQuery 的定义是 interface IAugmentedJQuery extends JQuery // TODO: events，如何定义？ //$destroy find(selector: string): IAugmentedJQuery;查找（元素：任何）：IAugmentedJQuery；查找（obj：JQuery）：IAugmentedJQuery；控制器（名称：字符串）：任何；注射器（）：任何；范围（）：IScope；继承数据（键：字符串，值：任意）：JQuery；继承数据（obj： [key：string]：任何；）：JQuery；继承数据（键？：字符串）：任何；

你怎么知道你可以在上面使用[0]？通过查看此定义，您如何知道这是一个数组？我是打字稿的新手，所以我以后不必问这类问题，我想知道如何自己弄清楚这些类型。与您所说的 d3.select 期望的 SVGSVGElement 类型相同。你是怎么知道的？ d3 文档只说它需要一个“节点”。 github.com/mbostock/d3/wiki/Selections#wiki-d3_select

您可以安全地使用[0]，因为这就是 jQuery 的工作方式。它将始终提供该索引作为对基础 html 对象的引用。你是对的d3 只是在期待一个节点。因此，只需传递 d3.select($element[0]) 应该没问题，并且输入正确。

哦我明白了！非常感谢！