Question

我试图在Angular JS中使用Boostrap 3 tooltips，以便工具提示在Angular范围内显示对象的值。这在页面加载时工作正常，但是当更新范围中对象的值时，工具提示仍会显示原始值。

HTML：

<div ng-app>
<div ng-controller="TodoCtrl">
    <span data-toggle="tooltip" data-placement="bottom" title="{{name}}">Hello {{name}}</span>
    <button type="button" ng-click="changeName()">Change</button>
</div>

使用Javascript：

function TodoCtrl($scope) {
    $scope.name = 'Ian';
    $scope.changeName = function () {
        $scope.name = 'Alan';
    }
}

$(document).ready(function () {
    $('span').tooltip();
});

到目前为止，有一个示例展示了我的代码以及此问题Fiddle

Answer 1

而不是：

<span data-toggle="tooltip" data-placement="bottom" title="{{name}}">Hello {{name}}</span>

使用：

<span data-toggle="tooltip" data-placement="bottom" data-original-title="{{name}}">Hello {{name}}</span>

Bootstrap Tooltip首先检查 data-original-title ，所以只要你保持这个值更新，你就可以了。看看这个有效Fiddle

Answer 2

我的猜测是它缺少对更改值的申请，因此angular对此一无所知并且不会更新。因此我建议使用angular ui bootstrap而不是raw bootstrap组件。

http://angular-ui.github.io/bootstrap/

这样就不需要jquery，这在我的书中是一个奖励。

编辑：在变更处理程序中尝试这个快速而肮脏的解决方法：

$('span').tooltip('hide')
      .attr('data-original-title', $scope.name)
      .tooltip('fixTitle');

但正如我所说，检查角度版本，因为这个黑客有几个问题....

具有Angular的Bootstrap 3工具提示

2 个答案: