Инициализация всплывающих подсказок после angularJS View обновила

Question

Я создал простое приложение 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> 

Answer 1

Используйте этот динамический рабочий код.

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

Идея когда-либо вы наведите курсор мыши на элементах, которые имеют [data-toggle="tooltip"] набор атрибутов на них, в подсказке отображается. Это работает для всех элементов (статических и динамических)

Answer 2

Если вы используете ngRoute в своем проекте, вы можете поместить приведенный ниже код в свой контроллер.

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

В противном случае обернуть код в $ таймаут,

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