Bootstrap angularJS View更新后初始化引导工具提示

1wnzp6jl 于 2023-11-15 发布在 Bootstrap

关注(0)|答案(2)|浏览(130)

我创建了一个简单的AngularJS应用程序，问题是，每当我的视图由于模型的更改而自动更新时（下面的示例中没有显示），工具提示看起来不再像引导工具提示。
我找到了这个答案satckoverflow，但我不知道如何应用这个解决方案。也许有人可以告诉我的方法，从提供的链接在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>

字符串

twitter-bootstrap

来源：https://stackoverflow.com/questions/36423790/initialize-bootstrap-tooltips-after-angularjs-view-has-updated

2条答案

按热度按时间

owfi6suc1#

使用此动态工作代码。

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

字符串
当你把鼠标悬停在设置了[data-toggle="tooltip"]属性的元素上时，工具提示就会显示出来。这对所有的元素（静态和动态）都有效。

赞(0）回复(0）举报 2023-11-15

uklbhaso2#

如果你在你的项目中使用ngRoute，你可以把下面的代码放在你的控制器中。

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

字符串
否则将代码 Package 在$timeout中，

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

型

赞(0）回复(0）举报 2023-11-15

我来回答

Bootstrap angularJS View更新后初始化引导工具提示

2条答案

相关问题

热门标签

最新问答