具有Angular的Bootstrap 3工具提示

Question

我正在尝试使用带有Angular JS的Boostrap 3工具提示,以便工具提示在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();
});

到目前为止,有一个例子展示了我的代码以及这个小提琴中的问题

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,所以只要你保持这个值更新,你就可以了.看看这个工作小提琴