Написание пользовательской директивы для добавления всплывающих подсказок к параметрам ng в AngularJS (TypeScript) - PullRequest
Новая
       21

Написание пользовательской директивы для добавления всплывающих подсказок к параметрам ng в AngularJS (TypeScript)

3 голосов
/ 05 апреля 2019

У меня есть некоторый 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());
}

Это, очевидно, очень неполно, потому что я не уверен, как реализовать то, что я хочу в машинописи. Я также не уверен, стоит ли превращать шаблон в div, который появляется при наведении, или найти способ добавить атрибут title к соответствующему элементу option.

Кроме того, в зависимости от решения, я пока не беспокоюсь о CSS. Я могу исправить любые проблемы со стилем позже.

1 Ответ

2 голосов
/ 09 апреля 2019

Для простоты мы просто изменили ng-options на ng-repeat внутри select. Гораздо проще, чем написать пользовательскую директиву.

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