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

Initialize bootstrap tooltips after angularJS View has updated

本文关键字：工具提示 初始化 视图 更新 angularJS      更新时间：2023-12-25

我创建了一个简单的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>

使用此动态工作代码。

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

想法是，当您将鼠标悬停在已设置[data-toggle="tooltip"]属性的元素上时，会显示工具提示。这适用于所有元素（静态和动态）

如果您在项目中使用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";
    });
  });
相关文章：