angularjs - 具有Angular的Bootstrap 3工具提示

Question

我试图将Boostrap 3 tooltips与Angular JS一起使用，以便工具提示在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