Twitter引导工具提示和Angular.js绑定

时间:2013-09-30 10:35:41

标签: javascript html css twitter-bootstrap angularjs

我有一个图片链接,用户可以点击退出,
当用户将鼠标悬停在图像上时,我希望显示工具提示。
使用Twitter Bootstrap基本上很容易,但棘手的部分如下:
用户有一个按钮来改变它的语言,当他/她应该翻译工具提示时,我使用Angular.translate这个并且它工作得很好但是当我绑定工具提示的选项时它没有拿起过滤器。

代码:

<a id="logout_link" title="" data-toggle="tooltip" href="#" data-original-title="{{ 'LOGOUT' | translate }}" data-placement="left">
    <img src="img/icons/logout.png" alt="logout" data-ng-click="logout()"/>
 </a>

任何人都知道如何让它变得动态吗?

1 个答案:

答案 0 :(得分:0)

检查angular-ui bootstrap project tooltip

您可以将工具提示绑定到这样的ng-model:

Dynamic Tooltip: <a href="">{{dynamicTooltipText | translate}}</a>

并应用翻译过滤器。然后在你的控制器中:

var TooltipDemoCtrl = function ($scope) {
  $scope.dynamicTooltipText = "LOGOUT";
};