我的指令停止与另一个结合工作.. Angular.js

时间:2017-05-30 15:49:43

标签: javascript angularjs angular-ui-bootstrap

我有一个指令来编辑动态调用的字段"点击编辑"。如果我点击一个项目,我可以毫无问题地编辑它。

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

我有一个过滤器,当找到它时突出显示一个单词,调用此过滤器 &#34; highligth&#34 ;.如果我添加行

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

我无法点击编辑该字段。

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

https://jsfiddle.net/jv5o6s8y/

1 个答案:

答案 0 :(得分: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