Angularjs scope lost when creating highcharts click function

[Ocajian]

Hi everyone!

I have run into a scoping problem when creating click functions on the nodes of my graphs built using Angularjs, Highcharts and the highcharts-ng directive.

The problem I am having is that any angular directives or functionality I place in my click function does not work.

Here is a simplified version of my problem - http://jsfiddle.net/47m46/8/

Once you click on a graph point/node html is generated which includes a button element with an ng-click directive placed on the button. However the function called in ng-click does not run and I have noticed no angular functionality generated by my highcharts click function works. 

The author of the highcharts-ng directive mentioned in the following thread that "These events (click function) will be outside of the angular world though so you'll need to wrap them with an apply or similar."

So my question is: How do I place the functionality set in my highcharts click function inside of the angular context?

Kind Regards

An Angular learner driver 

[Sander Elias]

Hi Ocajian,

If you add new raw html to your page that contains angular directives, you should $compile that. Before or after inserting the part
your contentDiv.innerHTML contains a angular directive (ngClick). However, angular is not aware of this template. Hence, the ngClick does not fire.

As you are learning, I think it's a good idea if you try to figure out how to solve this on your own. Have a go at it, look at the $compile docs.
If you get stuck, come back, and ask for help, We will try to coach you.

Regards
Sander

​

[Ocajian]

Hi Sander

Thanks for pointing me in the right direction! I think I might be able to take it from here but will come back to this thread if any issues arrise.

Regards

Ocajian

[Sander Elias]

Hi Ocajian,

Well, you should come back with your result nevertheless. if this is your first venture into $compile, I suspect you can use some extra coaching/pointers ;)

Regards

Sander

[Ocajian]

Hi Sanders

This is what I have come up with so far: JSFiddle 

I see that $compile attaches the html template I create to my scope. Am I correct in this?

My ng-click function call does now run.

However when I add for interest sake a variable to my comtroller - $scope.name = 'Ocajian'; and try display this within the content created in my click function I run into issues. Initially on load my $scope.name is not displayed but as soon as I click on the close button my $scope.name value does in fact display.

So this leads me to think that the $compile function providing my click function with angular scope only comes into play in certain conditions? Not sure what these conditions are though

Not sure why ng-click works but other values in my controller scope is not being displayed.

[Ocajian]

Apologies I forgot to update the JSFiddle - http://jsfiddle.net/47m46/13/

[Sander Elias]

Hi Ocajians,

If you change scope variables inside an function that runs outside angulars scope, you need to `$scope.$apply()'.
Hmm, that might sound a bit cryptic.. I'll ellaborate a bit.

your function that adds the html is run from a click event on your highchart feature. That click is run outside the angular realm, and can't be seen. To address this problem you should run this function inside a $apply.

Look up the docs on how to call $apply correctly, just adding the line `$scope.$apply()` will work, but this seems to be sub-optimal. (I leave you to your own research on this, if it still baffles you, once again, don't hesitate to ask!)

Regards

Sander