AngularJS动态修改Bootstrap Tooltip的data-placement属性无效问题

你遇到的问题核心在于：Bootstrap Tooltip组件是一次性初始化的。当页面加载时你通过$(document).ready初始化了所有Tooltip后，它就会固定使用当时的data-placement值，不会自动监听Angular作用域中changeDataPlacement的变化——哪怕你更新了DOM上的data-placement属性，已经创建的Tooltip实例也不会感知到这个修改。

我们需要在changeDataPlacement变化时，手动更新Tooltip的配置。具体来说，就是先销毁旧的Tooltip实例，再用新的位置参数重新初始化它。下面是修改后的完整代码：

修改后的JS代码 #

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.items = ['q1', 'q2', 'q3', 'q4'];
  // 初始化默认位置，替代ng-init的写法，更符合Angular最佳实践
  $scope.changeDataPlacement = 'left';
  $scope.watchlistexpand = false;

  $scope.changePlacement = function() {
    // 切换位置值
    $scope.changeDataPlacement = $scope.changeDataPlacement === 'left' ? 'right' : 'left';
    // 切换展开/收起状态
    $scope.watchlistexpand = !$scope.watchlistexpand;

    // 用$timeout确保Angular完成DOM更新后，再操作Tooltip
    $timeout(function() {
      // 先销毁旧的Tooltip实例，再用新的位置重新初始化
      $('[data-toggle="tooltip"]')
        .tooltip('dispose')
        .tooltip({ placement: $scope.changeDataPlacement });
    });
  };

  // 页面初始加载时，初始化Tooltip
  $timeout(function() {
    $('[data-toggle="tooltip"]').tooltip({ placement: $scope.changeDataPlacement });
  });
});

修改后的HTML代码 #

<!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-click="changePlacement()" 
       title="{{ watchlistexpand ? 'Compact' : 'Expand'}} View">
      {{ watchlistexpand ? 'Compact' : 'Expand'}} View
    </a>
    <div ng-repeat = "item in items">
      <a href="#" data-toggle="tooltip" title="Hooray!">{{item}}</a>
    </div>
  </div>
</body>
</html>

1. 移除ng-init：把初始化逻辑移到控制器里，这是Angular的推荐写法，避免在模板中混入业务逻辑。
2. 使用$timeout：确保Angular完成数据绑定和DOM更新后，再操作Tooltip——如果直接修改Tooltip，可能会因为DOM还没更新导致配置不生效。
3. 销毁并重新初始化Tooltip：Bootstrap没有提供直接更新placement的API，所以我们需要先销毁旧实例，再用新的位置参数创建新实例。
4. 合并状态切换逻辑：把展开/收起和位置切换的逻辑合并到一个方法里，代码更简洁。

内容的提问来源于stack exchange，提问作者HARSH HALAGALIMATH