创建highcharts点击功能时Angularjs范围丢失答案

【问题标题】：Angularjs scope lost when creating highcharts click function创建highcharts点击功能时Angularjs范围丢失
【发布时间】：2015-01-21 08:32:07
【问题描述】：

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

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

这是我的问题的简化版本 - 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 或类似方法将它们包装起来。”

所以我的问题是：如何让我的 highcharts 点击功能访问 Angularjs？我曾尝试使用 $scope.$apply() 但我对这个角度方面的有限知识并没有给我任何结果。

【问题讨论】：

试试这个jsfiddle.net/themyth92/47m46/10
哇，谢谢伙计！我认为这给了我足够的信息，可以从这里继续。
也许不是触发 ng-click，而是使用 jquery 并运行一个函数。 jsfiddle.net/47m46/11
嗨 Sebastian，这对我来说不是一个真正的选择，因为我想在 click 函数中使用 Angular 功能
我只向您介绍解决方法；）

标签： javascript angularjs highcharts

【解决方案1】：

如上面的 cmets 所述，这个问题的解决方案如下：

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 上下文中。

【讨论】：