创建高图表点击功能时丢失了 Angularjs 范围

Angularjs scope lost when creating highcharts click function

本文关键字：Angularjs 范围 高图表 功能 创建      更新时间：2023-09-26

在使用 Angularjs、Highcharts 和 highcharts-ng 指令构建的图形节点上创建单击函数时，我遇到了范围问题。

我遇到的问题是我在单击功能中放置的任何角度指令或功能都不起作用。

这是我问题的简化版本 - http://jsfiddle.net/47m46/8/

单击

任何图形节点以查看正在调用的单击函数。单击关闭按钮应触发一个ng-click事件，该事件加载一个显示警报的简单函数

这是我的点击函数生成的 html：

<div ng-controller="myctrl">
    <button ng-click="closeDrillDown()">Close</button>
    <h2>Positive Sentiment</h2>
    <p class="drillDownInfo"><strong>20%</strong> of posts where we can determine a sentiment are Positive</p>
</div>

这是使用 ng-click 调用的函数，它不会被触发

$scope.closeDrillDown = function() {
      alert('function works');
    };

highcharts-ng 指令的作者在下面的线程中提到 https://github.com/pablojim/highcharts-ng/issues/56"这些事件（点击功能）将在角度世界之外，所以你需要用 apply 或类似的东西来包装它们。

所以我的问题是：如何让我的高图表点击函数访问 Angularjs？我尝试使用 $scope.$apply（），但我对角度这一方面的有限了解并没有给我任何结果。

如上述评论所述，此问题的解决方案如下：

http://jsfiddle.net/themyth92/47m46/10/

var content = '<div id = "postListPopUpContainer"><div id = "postListPopUp"><div><button ng-click="closeDrillDown()">Close</button><h2>' + this.category + ' ' + this.series.name + '</h2>' +
                                '<p class="drillDownInfo"><strong>' + this.y + '%</strong> of posts where we can determine a sentiment are ' + this.category + '</p></div></div></div>';
$('#myCtrl').append($compile(content)($scope));

要注意的部分是我们使用 $compile（） 的地方。这会将生成的 html 放入 Angularjs 上下文中。

相关文章：