1

I'm working with Highcharts-ng https://github.com/pablojim/highcharts-ng

Looking through the source code, I see there are some things going on in the directive with scope.$on that I can use to broadcast. For example...

scope.$on('highchartsng.reflow', function () {
  chart.reflow();
});

Then in my controller, I can call a watch function on a scope:

$scope.$watch("someElement", function(nV,oV){
  if(nV===oV) return;
  $scope.$broadcast('highchartsng.reflow');
});

This works fine and makes a lot of sense. What I don't understand is why I can't add additional things to the directive. For example, if I can call .reflow() from the directive, I should be able to call .zoomOut() just as easily, correct?

// This doesn't work when I add it to the directive..
scope.$on('zoomOut', function() {
  chart.zoomOut();
});

// And broadcast the change from a scope in the controller
$scope.$watch('someElement', function(nV,oV){
    if(nV===oV) return;
    $scope.$broadcast('zoomOut');
});

What can be done to make this work? And if it can't be done, how can I make jQuery control it instead? (Is it even possible to make jQuery take over certain aspects of the directive instead of relying on angular for everything?)

Cœur
  • 37,241
  • 25
  • 195
  • 267
sdawson26
  • 139
  • 4
  • 15
  • two things: 1. even though it's not the 'angular way' you can use DOM manipulation using angular.element (in a directive I believe you can just inject $element) 2. Check that you are broadcasting to the right scope. The easy way to check if that is the case is to broadcast to $rootScope instead of $scope and log something in the $on function to make sure you are receiving the event. – ruedamanuel Apr 09 '14 at 23:13

1 Answers1

2

That should work. As the comment above says make sure you are calling it on the right scope.

You could just use jquery to get a handle to the chart and then call whatever methods you want. See: How can i get access to a Highcharts chart through a DOM-Container

I'm slow to add many of these types of events as they will apply to all charts on the page and don't seem a very angular way of doing things.

Community
  • 1
  • 1
Pablojim
  • 8,542
  • 8
  • 45
  • 69
  • 1
    Thanks Pablojim and @ruedamanuel for your input. I thought I was going crazy. It turns out I just pointing to the highcharts-ng.min.js file and needed to switch it back to the one I was altering... One of these days, I'll get my act together and not be such a noob. Thanks again :) – sdawson26 Apr 10 '14 at 18:40
  • @Pablojim, hey, can you please look into my issue related to highcharts-ng http://stackoverflow.com/questions/24513784/create-a-sticky-tooltip-in-highcharts-ng-implemented-in-jquery-highcharts – RONE Jul 01 '14 at 15:31