Angularjs 如何扩展ui引导指令

通过修补

$uibTooltip

中的link函数实现起来非常简单，但我不想修改第三方库，只想扩展指令

仅当文本有省略号（例如，

blabla…

）时，我才需要显示触发器“show”工具提示

用例与ui引导页面上的相同，但具有新属性：

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

新属性为：

工具提示省略号=“true”

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

因此，有以下几种方法：

• provider.decorator

  ->

  $delegate

  -我认为这不是一个选项，我需要修改链接，我不知道如何使用decoration
• uib工具提示的包装器，但我找不到在包装器链接中获取选项的方法

---

解决方案1
如果您只想根据不需要扩展指令的父作用域属性来决定工具提示是否应显示在焦点上，则您可以使用

tooltipenable

属性来实现这一点
而不是做

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

做：
并相应地设置$scope.has省略号。有关示例，请参见
解决方案2
当文本中没有省略号时，将工具提示触发事件设置为“无”。这在您的控制器中应该是微不足道的
解决方案-3（如果您确实想添加新属性）
您可以创建另一个同名的指令，并添加自己的链接函数来修改第一个作用域的值
请参阅我使用新的

shouldCount

属性扩展

计数器

指令，该属性修改原始值并防止计数

---

（如果这就是您想要达到的目标，我不建议您这样做。。请使用解决方案1或2）
以下是我对这个问题的解决方案，不确定它是否是最好的，但它是有效的
HTML
JS

（函数（）{
"严格使用",；
角度.module（'dcElements'）
.directive（'elementsOverflowEllipsis'，['$compile'，function（$compile）{
返回{
限制：“A”，
优先权：1000，
控制器：ElementsOverflowEllipsisController，
controllerAs:“$ctrl”
}
} ] );
ElementsOverflowEllipsisController.$inject=['$scope'，'$compile'，'$element']；
函数ElementsOverflowEllipsisController（$scope、$compile、$element）{
var$ctrl=this；
$ctrl.ISELLIPSASACTIVE=ISELLIPSASACTIVE；
激活（）；
函数IsEllipsisActivity（）{
返回（$element[0]。offsetWidth<$element[0]。scrollWidth）；
};
函数激活（）{
$element.addClass（'basic overflow省略号'）；
if（！$element.attr（'uib工具提示'））{
$element.attr（'uib tooltip'，$element.text（））；
$element.attr（'tooltipenable'，“$ctrl.isellipsactive（）”）；
$compile（$element）（$scope）；
}
}
}
})();

如果您不确定如何使用装饰器重写它，那么

ng If

或

ng开关

不会做您需要的事情吗？提供示例标记以供使用。也可以使用指令编译工具提示（如果适用于value@charlietfl更新了问题。仍然不太清楚带省略号的值在哪里…或者是否需要使用工具提示的确切条件。如果使用

ng，这应该很简单。一个简单的演示也会有帮助，我很确定你会在这里得到你想要的：@warrenreley不，不适合我。老实说，我不喜欢上面所有的解决方案。我想再找一个更合适的。我很困惑。有什么不喜欢的？你能详细说明一下为什么不想使用内置属性来实现你想要的功能，并且在官方文档中（解决方案1）？你刚才解释了如何实现我已经建议的方法。我不认为这些方法是正确的，我正在寻找另一种解决方案。我不确定它是否存在，但你的答案中的第1点和第2点对我没有多大帮助。如果我的问题不太清楚，很抱歉。此答案为您提供了在任何时候启用/禁用工具提示的方法，并向您展示了如何结合您建议的两种方法来解决问题。我建议你详细说明你的问题并添加你想要的，否则我认为社区很难帮助你。也许你是对的，我没有说你的答案是错的，但我觉得应该有更简单的解决方案，我对此一无所知。无论如何谢谢你！谢谢分享！我不确定在呈现所有项之后是否会调用优先级为1000的指令，但我相信它是有效的
<input type="text" value="Click me!" uib-tooltip="See?" tooltip-trigger="focus" tooltip-placement="right" tooltip-enable="hasEllipsis"/>

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

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

(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 );
            }
        }
    }

})();