Petya Petya - 11 days ago 5
AngularJS Question

Having Highcharts directive how to get/change current path onClick event?

I have a highchart directive with clickable bars. What I want to achieve is onClick to clean up the query parameters and then add a new parameter from the chart to the URL. However, when I injected the $location to the directive, the onClick event stoped working - I see the path has been changed, but the new page is not loaded.

Here is the code block:

point:{
events:{
click: function (event) {
location.search({}); // clean up all query parameters
var path = location.absUrl() + '/sql_id=' + this.category;
location.href = path; // send me to the new url
}
}
}


Thanks!

Answer

Thanks to Mitch Lillie here is the answer:

atlmonJSDirectives.directive('hcBar', ['$location', function (location) {
  return {
    restrict: 'E',
    scope: {
      items: '=',
      container: '@'
    },
    link: function(scope, element, attrs) {
      scope.$watch('items', function (newval, oldval) {
        if(newval) {
          ...

          var chart = new Highcharts.Chart({
            chart: {
              renderTo: scope.container,
              plotBackgroundColor: null,
              plotBorderWidth: null,
              plotShadow: false,
              height: 270,
              width: 470,
              type: 'bar'
            },
            ...
            series: [{
                data: serValues,
                point:{
                  events:{
                    click: function (event) {
                      location.search({}); // clean up all query parameters
                      var path = location.absUrl() + '/sql_id=' + this.category;
                      window.location.href = path;
                    }
                  }
                }
            }]
          }); 

      }});
    }
  }
}]);