Question

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

我只需要在文本有省略号（例如blabla...）时显示触发“show”工具提示。

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

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

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

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

所以，有办法：

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

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

当文本中没有省略号时，将tooltip-trigger事件设置为none。这在控制器中应该是微不足道的。

解决方案 - 3（如果您确实要添加新属性）

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

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

（如果这是你想要实现的所有我不建议做这个。使用解决方案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指令

2 个答案: