Question

我有这个HTML：

<span ng-show="!viewingOwnProfile() && user.isOnline == false" class="offline" tooltip data-content="Last seen {{user.lastSeenDateTime}}"><i class="fa fa-circle"></i></span>

基本上数据内容是要在工具提示中显示的内容。但它显示了＆＃34;上次见过{{user.lastSeenDateTime}}＆＃34;在工具提示中，而不是显示实际的日期时间。

这是我的指示。

angApp.directive('tooltip', function () {
    return {
        link: function (scope, elem, attrs) {
            console.log(attrs);
            $(elem).poshytip({
                className: 'tip-twitter',
                alignTo: 'target',
                alignX: 'right',
                alignY: 'center',
                offsetX: 5,
                offsetY: 5,
                fade: false,
                slide: false,
                content: $(elem).data('content')
            });
        }
    }
});

我使用poshytip来显示工具提示。请让我知道如何解决这个问题，即使使用静态文本甚至动态{{}}表达式也能正常工作。

Answer 1

您可以调用$ observe来监视插值字符串的更改：

angApp.directive('tooltip', function () {
    return {
        link: function (scope, elem, attrs) {
            console.log(attrs);

            // watch for changes to content attribute.
            attrs.$observe(attrs.content, function(newVal) {
                if (newVal) {
                   elem.poshytip({
                       className: 'tip-twitter',
                       alignTo: 'target',
                       alignX: 'right',
                       alignY: 'center',
                       offsetX: 5,
                       offsetY: 5,
                       fade: false,
                       slide: false,
                       content: newVal                
                   });
                }
            });

        }
    };
});

Tooltip指令内容未更新

1 个答案: