Javascript 更新angularJS视图后初始化引导工具提示

我创建了一个简单的AngularJS应用程序，问题是，每当我的视图由于模型中的更改而自动更新时（在下面的示例中没有显示），工具提示看起来不再像引导工具提示

我找到了这个答案，但我不知道如何应用这个解决方案。也许有人可以通过下面的MWE提供的链接向我展示方法

<div class="container" ng-app="testApp" ng-controller="testController">
    <h3>Data from Scope: {{data}}</h3>
    <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
     <button type="button" ng-click="refresh()">refresh data</button>
</div>

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

<script>
  var app = angular.module('testApp', []);
  app.controller('testController', function($scope) {
    $scope.data= 123;
    $scope.refresh = function () {
        $scope.data= Math.random();
    }
  });
</script>

作用域中的数据：{{Data}
刷新数据
$（文档）.ready（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）；
});
var app=angular.module（'testApp'，[]）；
app.controller（'testController'，函数（$scope）{
$scope.data=123；
$scope.refresh=函数（）{
$scope.data=Math.random（）；
}
});

如果您在项目中使用ngRoute，您可以在控制器中输入以下代码

$scope.$on('$viewContentLoaded', function(event){
    console.log('content loaded!')
  });

否则，将代码包装在$timeout内

var app = angular.module('testApp', []);
  app.controller('testController', function($scope, $timeout) {
    $timeout(function(){
        $scope.data= "hello";
    });
  }); 

---

使用此动态工作代码

$(document).on('mouseover','[data-toggle="tooltip"]',function(){
    $(this).tooltip('show');
});

---

其想法是，当您将鼠标悬停在设置了

[data toggle=“tooltip”]

属性的元素上时，将显示工具提示。这适用于所有元素（静态和动态）

您的应用程序名称在html和JS中是否不同？另外，你打算在你的项目中使用路由器吗？你正在使用AngularStrap吗？我必须将ngRoute代码放入控制器的具体位置吗？这很有效，谢谢你，但我如何修改按钮元素以避免工具提示出现两次？此解决方案会出现两次吗？？您需要删除在document ready上应用工具提示的代码。。只有上述代码才足够。如果仍然存在问题，请尝试此

$（this）.tooltip（'destroy'）

。销毁工具提示，然后再次应用它。@d4rty如果此解决方案解决了您的问题，请将其标记为答案。现在一切正常，我首先将您的代码放入

$（文档）中。准备就绪（…

。谢谢！@d4rty很高兴它对您有所帮助