Question

我在我的网页上使用Bootstrap工具提示，我希望使用{{}}将文本传递到其上的title属性，但它不起作用。这是我的HTML：

<a class="questionIcon" data-toggle="tooltip" data-placement="right" title="{{textBundle.tooltip-message}}">?</a>

我正在我的控制器中初始化工具提示，如下所示：

$(function () {
    $('[data-toggle="tooltip"]').tooltip();
});

但是，当我将鼠标悬停在？上时，显示的消息为：{{textBundle.tooltip-message}}而不是实际内容。有没有办法使用标准Bootstrap工具提示输入动态内容？

Answer 1

同意评论......永远不要在控制器中使用jquery。你应该使用一个指令。例如，我的指令被称为“aiTooltip”，这是它如何利用角度带（http://mgcrea.github.io/angular-strap/#）

plunkr：http://plnkr.co/edit/DIgj8vnZFyKFtX6CjDHi?p=preview（有关展示位置的问题，但您明白了这一点）

在你的模板中：

    <p class="link" ai-tooltip="{{ name }}">{{ name }}</p>

在指令中我们注入了angular-strap提供的$tooltip服务：

app.directive('aiTooltip', function aiTooltipDirective($rootScope, $timeout, $tooltip) {
        return {
            restrict: 'A',
            scope: {
                aiTooltip: '@', // text to display in caption
            },
            link: function aiTooltipLink(scope, elem, attrs) {
                var tooltip;

                $timeout(function() {
                    tooltip = $tooltip(elem, {
                        title: scope.aiTooltip,
                        html: true,
                        trigger: scope.aiTooltipTrigger|| 'hover',
                        placement: scope.aiTooltipPlacement || 'top',
                        container: scope.aiTooltipContainer || 'body'
                    });
                });
            }
        };
    });

在模板的$scope中，我们传入一个名为name的范围变量

$scope.name = 'Foobar';

将Angular数据绑定文本传递给Bootstrap Tooltip title属性

1 个答案: