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

Question

我有一些 HTML 当前正在使用 ng-options 指令填充 select 框。我们的问题是 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());
}

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

此外，根据解决方案，我暂时不担心 CSS。我可以稍后解决任何样式问题。

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

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

Writing custom directive to add tooltips to ng-options in AngularJS (TypeScript)

angularjs

typescript

angularjs-directive

ng-options

HTML

Javascript

HTML