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

I am using Bootstrap tooltips on my page and I want to pass in text to the title attribute on it, using {{ }} but it doesn't work. Here's my HTML:

我在我的页面上使用Bootstrap工具提示,我想使用{{}}将文本传递给它上面的title属性,但它不起作用。这是我的HTML:

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

I am initializing the tooltips in my controller like this:

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

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

However, when I hover over the ?, the message that is displayed is: {{textBundle.tooltip-message}} and not the actual content. Is there a way to get the dynamic content to be inputted using the standard Bootstrap tooltip?

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

1 个解决方案

#1

Agree with the comments... never, ever use jquery inside a controller. And you should use a directive. For example, my directive is called "aiTooltip", and here is how it leverages angular strap (http://mgcrea.github.io/angular-strap/#)

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

plunkr: http://plnkr.co/edit/DIgj8vnZFyKFtX6CjDHi?p=preview (something is awry with the placement, but you get the idea)

plunkr:http://plnkr.co/edit/DIgj8vnZFyKFtX6CjDHi?p=preview(放置的东西很糟糕,但你明白了)

In your template:

在您的模板中:

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

And in the directive we inject the $tooltip service provided by angular-strap:

在指令中我们注入了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'
                    });
                });
            }
        };
    });

And in the $scope of the template we pass in a scope variable called name

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

$scope.name = 'Foobar';

#1