angularjs - 如何扩展 ui bootstrap 指令

Question

通过修补 $uibTooltip 中的链接函数来实现非常简单，但我不想修改第三方库，只是扩展指令。

只有在文本中有省略号(例如 blabla...)时，我才需要显示触发器“显示”工具提示。

用例与 ui-bootstrap 页面相同，但具有新属性:

<input type="text" value="Click me!" uib-tooltip="See?" tooltip-trigger="focus" tooltip-placement="right"/>

新属性是:tooltip-ellipsis="true".

当然，只有在触发事件之前和链接状态之后才能检测到省略号。

所以，有几种方法:

• provider.decorator -> $delegate - 我认为这不是一个选项，我需要修改链接，但我不知道如何使用装饰来完成。
• uib-tooltip 的包装器，但我找不到在我的包装器链接中获取选项的方法。

Answer 1

解决方案一

如果您只想根据父作用域的属性决定工具提示是否应该显示在焦点上，您不需要扩展该指令，您有tooltip-enable 就是这样做的属性。

而不是做

<input type="text" value="Click me!" uib-tooltip="See?" tooltip-trigger="focus" tooltip-placement="right" tolltip-ellipsis="true"/>

做:

<input type="text" value="Click me!" uib-tooltip="See?" tooltip-trigger="focus" tooltip-placement="right" tooltip-enable="hasEllipsis"/>

并相应地设置你的 $scope.hasEllipsis 。查看documentation plunkr 举个例子

方案二

当您的文本中没有省略号时，将您的工具提示触发事件设置为无。这在您的 Controller 中应该是微不足道的。

解决方案 - 3(如果你真的想添加一个新属性)

您可以创建另一个具有相同名称的指令，并添加您自己的链接函数来修改第一个作用域的值。

查看我的 modified plunkr使用新的 shouldCount 属性扩展 counter 指令，该属性修改原始值并阻止计数。

(如果这就是您想要实现的全部我不建议这样做。使用解决方案 1 或 2)