编写自定义指令以在 AngularJS (TypeScript) 中向 ng-options 添加工具提示

Posted 2023-03-13

【中文标题】编写自定义指令以在 AngularJS (TypeScript) 中向 ng-options 添加工具提示

【英文标题】：Writing custom directive to add tooltips to ng-options in AngularJS (TypeScript)

【发布时间】：2019-08-27 18:21:27

【问题描述】：

我有一些 html 当前正在使用 ng-options 指令填充选择框。我们的问题是 ng-options 不支持使用工具提示。为了解决这个问题，我正在尝试编写一个自定义指令，但我对 AngularJS 和 TypeScript 还很陌生，所以我不知道从哪里开始。

这是目前为止的相关代码：

HTML

<select grid-column-tooltip class="select-box" id="availableColumn" size="5" 
        ng-options="column as column.localizedTitle for column in vm.availableColumns | filter: vm.environmentMatches track by column.field" 
        ng-model="vm.availableColumnElement"
        ng-dblclick="vm.moveToSelectedColumns()">
    <option value="" ng-if="false"></option>
</select>

column 对象上有一个名为 environmentLabel 的字段，我想在悬停时将其显示为工具提示。

javascript

module psfc 
class GirdColumnTooltipDirective implements ng.IDirective 
    restrict = 'A';

    template = '<div class="grid-column-tooltip">column.environmentLabel</div>';
    constructor(
    )         

    static directive = (): ng.IDirectiveFactory => 
        return () => new GirdColumnTooltipDirective();
    


angular
    .module('psfc')
    .directive('gridColumnTooltip', GirdColumnTooltipDirective.directive());

这显然是非常不完整的，因为我不确定如何在 typescript 中实现我想要的。我也不确定是否将模板制作成悬停时出现的div，或者是否找到将title 属性添加到相关option 元素的方法。

另外，取决于解决方案是什么，我现在并不担心 CSS。我可以稍后解决任何样式问题。

【问题讨论】：

你为什么要使用 TypeScript 进行标记？如果是 AngularJS，那就是 Javascript，而不是 TypeScript。使用正确的标签，您可能会得到更好的帮助。

两者兼而有之。 AngularJS 可以是 TypeScript 或纯 Javascript。在这种情况下，我想将 AngularJS 用于 TypeScript。

由于您是 AngularJS 的新手，请考虑使用自定义选择插件，因为使用 ng-options 要么太难，要么结果会充满错误。而且这个问题都是关于 AngularJS，而不是 TypeScript，所以请删除typescript 标签。

你考虑过使用引导程序中的 $uibpopover 吗？

【参考方案1】：

为简单起见，我们最终将ng-options 更改为在select 中使用ng-repeat。比编写自定义指令简单得多。

HTML

<select class="select-box" id="availableColumn" size="5"
        ng-dblclick="vm.moveToSelectedColumns()">
    <option ng-repeat="column in vm.availableColumns | filter: vm.environmentMatches track by column.field"
            value="column.field"
            ng-click="vm.availableColumnElement = column"
            title="column.localizedTitle">
         column.localizedTitle
     </option>
</select>

【讨论】：

请注意option 标签不允许title 属性。即使它在某些浏览器中工作，它也不符合标准，并且并非所有浏览器都支持它。例如，Edge 不显示标题。

我知道这不是标准，因为option 是select 元素的不完整部分，但经过测试，它似乎在我们支持的所有浏览器（包括 Edge 和即）。