Проблема с функцией щелчка highcharts-ng и Angularjs

Я настроил фабричный провайдер для своего графа. График построен из highcharts и highcharts-ng, который является директивой angularjs highcharts.

Затем в моем контроллере с именем SentimentChartController я создал функцию щелчка на узлах графа следующим образом:

$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);
    };

HTML-код, сгенерированный после нажатия на узел графика, выглядит следующим образом:

<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>

В моем SentimentChartController я также объявил следующую функцию:

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

Эта функция должна срабатывать при щелчке следующего элемента img, который создается во время моей функции щелчка, определенной выше.

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

Однако я получаю сообщение об ошибке «Uncaught ReferenceError: closeDrillDown не определен».

Почему это происходит, хотя я установил ng-controller="SentimentChartController" в своем контейнере div


angularjs highcharts highcharts-ng
person ocajian    schedule 19.01.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Для функций с областью действия вы должны использовать атрибут ng-click вместо onclick, вы получили ошибку, потому что ваши функции определены в вашей области, а не как глобальная функция javascript, другое дело, выбор dom в контроллере не является хорошей практикой, попробуйте использовать angular .element для выбора этого dom в отдельной директиве

person Leonardo Salles    schedule 19.01.2015
comment
Спасибо за помощь. Я только что заменил onclick на ng-click и не получаю ошибку ссылки Uncaught, но теперь ничего не происходит, когда я нажимаю на свой элемент. Это все еще не похоже, что моя функция запускается. Есть идеи, почему? - person ocajian; 19.01.2015
comment
Как я вижу, ваша функция ничего не выбирает в document.getElementById, вам нужно передать идентификатор элемента, для которого вы хотите установить стиль document.getElementById('myElement').style.display='none'; если вы поместите одно предупреждение в свою функцию, вы увидите, вызываются ли функции - person Leonardo Salles; 19.01.2015
comment
Извините, забыл изменить это в моем вопросе: теперь функция должна выдавать предупреждение («вызванная функция»), но этого не происходит. Используя инструменты chrome dev, я понял, что функция никогда не запускается, но я не знаю, почему - person ocajian; 19.01.2015
comment
Уникальная проблема, которую вы уже решили, попробуйте проверить, правильно ли определен контроллер, и используйте элемент ссылки ‹a› с вашим значком внутри, чтобы вызвать ng-click ‹a href ng-click=closeDrillDown()›‹img... - person Leonardo Salles; 19.01.2015
comment
Также не работает ... На самом деле никакие угловые директивы не работают в моей функции щелчка highcharts. придется все это дело пересматривать - person ocajian; 19.01.2015
comment
Кажется, это ошибка highcharts, проверьте эту ссылку, возможно, вы поймете проблему с контекстом gotoanswer.stanford.edu/ - person Leonardo Salles; 19.01.2015