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

好的，它现在正在工作，但我不确定我究竟为什么理解。我在$scope.$apply()调用后添加了$location.url(...)。

$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()以找出使其成为必要的内容。

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

2 个答案: