javascript - jquery $ ('div' .html 不适用于第三方模块( Angular )

Question

我正在尝试显示 <div id="right"> 的内容当鼠标悬停在另一个 div 上时。 #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 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>');)