angularjs - 编写自定义指令以在 AngularJS (TypeScript) 中向 ng-options 添加工具提示
问题描述
我有一些 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。我可以稍后解决任何样式问题。
解决方案
为简单起见,我们最终只是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>
推荐阅读
- sql - 我的 SQL 查询中的外键错误消息
- javascript - 对JS对象数组中的项目一次X个项目进行分组,并将每个组的值相加
- macos - OSX 上的未签名框架
- amazon-web-services - 从服务器迁移到 aws teamcity。我使用服务器移动还是导入?
- tensorflow-probability - 如何制作自定义张量流概率层?
- javascript - JavaScript中requestAnimationFrame中的frame是什么意思?
- python - 您如何处理这个特定程序中的(意外缩进)语法?
- ios - Flutter build ios 错误:为设备构建时遇到错误
- datetime - 如何使用 Moment 显示自定义日期和时间
- perl - 在连接 (.) 或字符串中使用未初始化的值 $login_output