My directive stops working combined with another..

Question

I have a directive to edit a field dynamically called "click-to-edit". If I click on an item, I can edit it without problems.

<span ng-click="ignoreClick($event);" >
  <a href='' click-to-edit item="faq" ng-model='faq.pregunta'
     typeinput='textarea'>{{faq.pregunta}}
  </a>

I have a filter that highlights a word when it is found, this filter is called "highligth". If I add the line

ng-bind-html="faq.pregunta | highlight:search.pregunta"

I can not click to edit the field.

but the filter works for me to highlight. I need to not miss the functionality of editing the fields without it being damaged when the text is highlighted. How can I fix this?

https://jsfiddle.net/jv5o6s8y/

Answer 1

The issue with ng-bind-html is that it replaces the directive's template, that is why you are not able to click inside the directive (original ng-click with toggle will not work), it doesn't contain the initial template. You should highlight the text somewhere inside your directives template, like:

<div class="hover-text-field" ng-show="!editState" ng-click="toggle()" ng-bind-html="model | highlight:search.pregunta"></div>

, check this working jsfiddle.