如何从angular-chart.js onClick事件处理程序中访问$location？

Question

当用户单击角度图条形图中的条形图时，我希望切换到新的URL。我正在进入事件处理程序，但应用程序从不更改URL。

angular-chart指令如下所示：

<canvas id="prCosts" class="chart chart-bar"
        chart-data="prCosts.data"
        chart-labels="prCosts.labels" chart-options="prCosts.options"
        chart-series="prCosts.series"
        chart-dataset-override="prCosts.datasetOverride"
        chart-click="onClick"
</canvas>

控制器中的相关代码如下所示：

$scope.prCosts.data = ...
$scope.prCosts.labels = ...
$scope.prCosts.options = ...
$scope.prCosts.series = ...
$scope.datasetOverride = ...
$scope.onClick = function (points, evt)
{
  var pr = points[0]._view.label;
  $location.url('/details?pr=' + pr);
};

onClick函数从图表中获取标签，并将其用作URL中的参数。该函数执行时没有错误，但应用程序不会切换到新的URL。

我在应用程序的另一个地方(但不是在事件处理程序中)使用了相同的代码，它工作得很好。这让我相信我有一个作用域问题。如何获得$location.url()调用的正确作用域？

Answer 1

试试这个：

var that = this;

$scope.prCosts.data = ...
$scope.prCosts.labels = ...
$scope.prCosts.options = ...
$scope.prCosts.series = ...
$scope.datasetOverride = ...
$scope.onClick = function (points, evt)
{
  var pr = points[0]._view.label;
  that.$location.url('/details?pr=' + pr);
};

Answer 2

好了，它现在起作用了，尽管我不确定我确切地理解了为什么。我在$location.url(...)调用之后添加了一个$scope.$apply()。

$scope.prCosts.data = ...
$scope.prCosts.labels = ...
$scope.prCosts.options = ...
$scope.prCosts.series = ...
$scope.datasetOverride = ...
$scope.onClick = function (points, evt)
{
  var pr = points[0]._view.label;
  $location.url('/details?pr=' + pr);
  $scope.$apply();
};

我想我需要深入研究$apply()来弄清楚是什么使得这是必要的。