angularjs Bootstrap 3Angular 工具提示

goucqfw6 于 2022-12-22 发布在 Angular

关注(0)|答案(3)|浏览(192)

我正在尝试使用Boostrap 3的工具提示和Angular JS，这样工具提示就可以显示Angular 范围内的对象值。当页面加载时，这个方法可以正常工作，但是当Angular 范围内的对象值更新时，工具提示仍然显示原始值。
超文本：

<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中的问题

angularjs

来源：https://stackoverflow.com/questions/23241209/bootstrap-3-tooltips-with-angular

3条答案

按热度按时间

5n0oy7gb1#

取代：

<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，所以只要你保持这个值更新，你就可以了。

赞(0）回复(0）举报 2022-12-22

o4tp2gmn2#

我的猜测是它缺少了一个修改值的apply，所以angular对此一无所知，也不会更新，因此我推荐angular ui bootstrap而不是raw bootstrap组件。
http://angular-ui.github.io/bootstrap/
这样就不需要jquery了，这在我的书中是一个额外的收获。
EDIT：在变更处理程序中尝试以下操作，以获得快速而粗略的解决方案：

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

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

赞(0）回复(0）举报 2022-12-22

iklwldmw3#

最新Angular 版本用途：[属性数据-原始标题]=“动态工具提示消息”

<button 
data-toggle="tooltip"     
[data-title]="dynamicTooltipMsg" 
[attr.data-original-title]="dynamicTooltipMsg">
    Testing
</button>

赞(0）回复(0）举报 2022-12-22

我来回答

angularjs Bootstrap 3Angular 工具提示

3条答案

相关问题

热门标签

最新问答