jQuery $（'div'）。html不適用於第三方模塊（角度）

Question

當鼠標懸停在另一個div上時，我試圖顯示<div id="right"> 。 #right包含來自Angular-charts（ http://jtblin.github.io/angular-chart.js/ ）的圖形。

這是我的jQuery：

                    <div>
                       <div>
                          <canvas id="doughnut" class="chart chart-doughnut" data="data" labels="labels" legend="true" click="onClick">
                          </canvas>
                       </div>
                       <h3>Some text</h3>
                    </div>

當我將其懸停在jQuery中的其他div上時，我嘗試實現了此功能以在#right中顯示。

 $(function(){

          $('#some_other_div').on('mouseover', function(){
            $('#right').html('<div><canvas id="doughnut" class="chart chart-doughnut" data="data" labels="labels" legend="true" click="onClick"></canvas></div><h3>Some text</h3>');
            })     
    });

將some_other_div懸停在some_other_div ，底部僅顯示一個空格和Some text 。 當直接在HTML中實現圖形時，我確保圖形可以在其他地方使用。 僅通過.html面對此問題。

有沒有辦法解決這個問題？ 謝謝。

Answer 1

在Angular系統之外更改html不會告訴Angular DOM已更改以使其起作用。 嘗試通過$ apply（）函數進行更改。

angular.element("#some_other_div").scope().$apply($('#right').html('<div><canvas id="doughnut" class="chart chart-doughnut" data="data" labels="labels" legend="true" click="onClick"></canvas></div><h3>Some text</h3>');)