【问题标题】：Bootstrap tooltip's data-placement is not working when changed dynamically using AngularJS使用 AngularJS 动态更改时，引导工具提示的数据放置不起作用
【发布时间】：2018-01-06 20:19:33
【问题描述】：

当我打开页面时，第一次将鼠标光标悬停在段落列表（q1,q2,q3,q4）上，tooltip 的data-placement 属性设置在左侧。

预期：当我点击“展开视图”链接时，我正在调用一个方法 changePlacement，我正在更改 $scope.changeDataPlacement 的范围值到 'right' ，但 data-placement 不会更改为 'right'...

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.items = ['q1', 'q2', 'q3', 'q4'];

    $scope.changePlacement = function() {
        $scope.changeDataPlacement = 'right';
        console.log($scope.changeDataPlacement);
        alert("data-placement@ right side:" + $scope.changeDataPlacement);
    };

    $(document).ready(function() {
        $('[data-toggle="tooltip"]').tooltip();
    });
});

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
   </head>
   <body>
      <div ng-app="myApp" align="center" ng-controller="myCtrl">
         <a href="javascript:;" ng-init="watchlistexpand = null;changeDataPlacement='left'" ng-click="watchlistexpand = !watchlistexpand; changePlacement();" title="{{ watchlistexpand ? 'Compact' : 'Expand'}} View">{{ watchlistexpand ? 'Compact' : 'Expand'}} View</a>
         <div ng-repeat = "item in items">
            <a href="#" data-toggle="tooltip" data-placement="{{(changeDataPlacement === 'left')? 'left':'right'}}" title="Hooray!">{{item}}</a>
         </div>
      </div>
   </body>
</html>

【问题讨论】：

标签： javascript jquery html angularjs twitter-bootstrap

【解决方案1】：

问题：

这个问题实际上与 AngularJS 无关，而是因为 jQuery 和 Bootstrap 的工作方式。在您的代码中，当您单击“展开视图”时，changeDataPlacement 将使用值 'right' 进行更新。如果你检查 HTML，你会看到这个data-placement="right"，这意味着它被 AngularJS 正确渲染了。

data-placement="right" 未生效的原因是 Bootstrap 的 tooltip 仅在初始化时考虑 data-placement 的值，在您的情况下，这是在页面加载时。因此，即使您稍后以编程方式（使用 Javascript、jQuery 或 AngularJS）更改 data-placement 的值，它也不会在 tooltip 本身上反映此更改。

解决方案：

要解决此问题，您可以销毁 tooltip 并使用新位置再次初始化它（不推荐）。或者更好的是更改已经初始化的tooltip，像这样：

$('#tooltip').data('bs.tooltip').options.placement = 'right';

这将适用于单个tooltip，要在所有这些中更改它，您可以这样做：

$('[data-toggle="tooltip"]').each(function() {
    $(this).data('bs.tooltip').options.placement = 'right';
});

您可以将其放入您的 changePlacement 函数中，它会像在 codepen 中一样正常工作。

或者你可以这样做AngularJS方式，即$watchchangeDataPlacement的变化，并在其值变化时运行这个sn-p代码。像这样：

$scope.$watch('changeDataPlacement', function(placement) {
    $('[data-toggle="tooltip"]').each(function() {
        $(this).data('bs.tooltip').options.placement = placement;
    });
});
// Then in your function, you simply do this:
$scope.changePlacement = function() {
    $scope.changeDataPlacement = 'right';
};

这是另一个codepen 演示了后来的实现。

【讨论】：