current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I set up a factory provider for my graph. The graph is built from highcharts and highcharts-ng which is an angularjs highcharts directive.

Within my controller named SentimentChartController I then created a click function on my graph nodes as follows:

$scope.AveSentimentChartConfigMain.options.plotOptions.series.point.events.click = function () {
      var containerDiv = document.createElement('div');
      containerDiv.setAttribute('id', 'postListPopUpContainer');
      containerDiv.setAttribute('ng-controller', 'SentimentChartController');
      var contentDiv = document.createElement('div');
      contentDiv.setAttribute('id', 'postListPopUp');
      contentDiv.innerHTML = '<img onclick="closeDrillDown()" src="images/closePostListPopUp.svg" title="Click to close" class="closeIcon" width="18" height="18"><h2>' +
      this.category + ' ' + this.series.name + '</h2>' +
      '<p class="drillDownInfo"><strong>' + this.y + '%</strong> of posts where we can determine a sentiment are ' + this.category + '</p>';
      document.body.appendChild(containerDiv);
      containerDiv.appendChild(contentDiv);
    };

The html generated once you click on a graph node is as follows:

<div id="postListPopUpContainer" ng-controller="SentimentChartController">
  <div id="postListPopUp">
    <img src="images/closePostListPopUp.svg" title="Click to close" class="closeIcon" width="18" height="18" onclick="closeDrillDown()">
    <h2>Positive Sentiment</h2>
    <p class="drillDownInfo"><strong>26%</strong> of posts where we can determine a sentiment are Positive</p>
  </div>
</div>

In my SentimentChartController I also declared the following function:

$scope.closeDrillDown = function() {
      alert('function called');
};

This function should fire onclick of the following img element which is created during my click function defined above

<img onclick="closeDrillDown()" src="images/closePostListPopUp.svg" title="Click to close" class="closeIcon" width="18" height="18">

However I get a "Uncaught ReferenceError: closeDrillDown is not defined" error.

Why is this happening even though I set up ng-controller="SentimentChartController" in my container div

share|improve this question

1 Answer 1

up vote 0 down vote

For scoped functions you should use ng-click attribute instead onclick, you received the error because your functions is defined in your scope and not as a global javascript function, other thing is, select dom in controller is not a good practice, try use angular.element to make this dom selections in a separated directive

share|improve this answer
    
Thanks for the help. I just replaced onclick with ng-click and don't receive the Uncaught reference error but now nothing happens when I click on my element. It still doesn't look like my function is getting fired. Any idea why? –  ocajian Jan 19 at 7:58
    
As I see, your function select nothing in document.getElementById, you need to pass the Id of element that you want to set style document.getElementById('myElement').style.display='none'; if you put one alert in your function you will see if the functions is called –  Leonardo Salles Jan 19 at 8:00
    
Sorry forgot to change that in my question: The function should now provide an alert('function called') but this is not happening. Using chrome dev tools I have realized that the function never get triggered but I don't know why –  ocajian Jan 19 at 8:03
    
The unique problem that I already see you solved, try check if controller is correct defined and use <a> link element with your icon inside to trigger the ng-click <a href ng-click="closeDrillDown()"><img... –  Leonardo Salles Jan 19 at 8:08
    
Also doesn't work... In fact no angular directives work in my highcharts click function. I will have to relook this whole thing –  ocajian Jan 19 at 8:15

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.