angularJSビューが更新された後にブートストラップツールチップを初期化する

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

使用このダイナミックな作業コードをあなたのコードをラップ。あなたがそれらの上にセット[data-toggle="tooltip"]属性を持つ要素の上にマウスを置くこれまで、ツールチップが表示されたときに

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

アイデアです。これはすべての要素（静的および動的）に対して機能します

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"; 
    }); 
    });