如何扩展 ui bootstrap 指令

Question

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

我需要显示触发器 "show" 仅当文本有省略号（例如 blabla...）时工具提示。

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

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

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

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

所以，有几种方法：

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

Answer 1

解决方案 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

解决方案 2

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

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

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

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

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

Answer 2

这是我对这个问题的解决方案，不确定它是否是最好的，但它确实有效

HTML

<div elements-overflow-ellipsis>
    <span class="font-bold no-margins"> {{name | translate}} </span>:
</div>

CSS

.basic-overflow-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

JS

(function() {
    'use strict';

    angular.module('dcElements')
        .directive('elementsOverflowEllipsis', [ '$compile', function( $compile ) {
            return {
                restrict: 'A',
                priority: 1000,
                controller: ElementsOverflowEllipsisController,
                controllerAs: '$ctrl'
            }
        } ] );

    ElementsOverflowEllipsisController.$inject = [ '$scope', '$compile', '$element' ];

    function ElementsOverflowEllipsisController( $scope, $compile, $element ) {
        var $ctrl = this;
        $ctrl.isEllipsisActive = isEllipsisActive;

        activate();

        function isEllipsisActive() {
            return ( $element[0].offsetWidth < $element[0].scrollWidth );
        };

        function activate() {
            $element.addClass( 'basic-overflow-ellipsis' );
            if ( !$element.attr( 'uib-tooltip' ) ) {
                $element.attr( 'uib-tooltip', $element.text() );
                $element.attr( 'tooltip-enable', "$ctrl.isEllipsisActive()" );
                $compile( $element )( $scope );
            }
        }
    }

})();

如何扩展 ui bootstrap 指令

How to extend ui bootstrap directive

angularjs

angular-ui-bootstrap