我的指令停止与另一个指令结合使用.. Angular.js

Question

我有一个指令来动态编辑一个名为“点击编辑”的字段。如果我单击一个项目，我可以毫无问题地对其进行编辑。

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

我有一个过滤器，当找到一个单词时会突出显示它，这个过滤器被称为 “高光”。如果我添加行

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

我无法点击编辑该字段。

但过滤器可以让我突出显示。我不需要错过编辑字段的功能，而不会在突出显示文本时损坏它。我该如何解决这个问题？

https://jsfiddle.net/jv5o6s8y/

Answer 1

ng-bind-html 的问题在于它替换了指令的模板，这就是为什么您无法在指令内单击的原因（带有切换的原始ng-click 将不起作用），它不包含初始模板。 您应该在指令模板中的某处突出显示文本，例如：

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

，检查这个工作jsfiddle。