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>');)