AngularJS - ng-bind-html-unsafe 在指令中不起作用

Question

我遇到了下一个问题。正如您在 jsFiddle 中看到的那样，我正在尝试在我的指令的模板中使用ng-bind-html-unsafe，我传递给item{{itemColumn.field}}的属性值取决于，因为位于 ng-repeat 中。问题是我在属性突出显示为真的列中使用 ng-bind-html-unsafe，因为这个想法是过滤数据（使用文本输入）并突出显示用户在输入中引入的选择。如您所见，这些列中没有值（因为似乎由于某种原因绑定不起作用）。

我已经阅读了有关可能的解决方案，一个人说可以使用$compile（我实际上正在使用）修复它，所以我有一些时间陷入困境，不知道如何解决它。

以前有人遇到过这样的事情吗？ 可以给我一些关于如何解决问题的想法吗？

编辑：

正如Joachim所建议的，我将提供更相关的代码。在我的模板中，我有这个

 <td ng-repeat="itemColumn in gridOptions.gridColumnDefs " 
     ng-show="itemColumn.visible | elementIsDefined : itemColumn.visible : true" >
     <div ng-switch on="itemColumn.highlight"> " +
          <span ng-switch-when="true">
               <div ng-bind-html-unsafe="item.{{itemColumn.field}} | highlight: {{gridOptions.searchInput}}" ></div>
          </span>
          <span ng-switch-when="false">{{item[itemColumn.field]}}</span>
     </div>
 </td>

我认为我的问题与我尝试在 ng-bind-html-unsafe 指令（我需要）中使用绑定{{ }}的事实有关。当页面呈现时，我得到了带有模板中所述属性的div，但ng-bind-html-unsafe不呈现任何 HTML。

Answer 1

以防万一你需要它，我找到了一种方法让我的问题消失。在我的指令内的链接函数中，我添加了以下函数：

 scope.getValueToBind = function (item, subItem) {
      return item[subItem];
 };
 scope.getFieldToFilter = function () {
      var inputValue = scope.gridOptions.searchInput;
      var returnValue = $("input[ng-model='" + inputValue + "']").val();
      return returnValue;
 };

在我的模板中，我调用这个新函数，而不是在ng-bind-html-unsafe中使用直接绑定（它根本不适用于内部绑定）。这些函数返回我需要的值（好像我有一个绑定）

 <td ng-repeat="itemColumn in gridOptions.gridColumnDefs " 
     ng-show="itemColumn.visible | elementIsDefined : itemColumn.visible : true" >
          <div ng-switch on="itemColumn.highlight"> 
               <span ng-switch-when="true"><div ng-bind-html-unsafe="getValueToBind(item,itemColumn.field) | highlight: getFieldToFilter()" ></div>
               </span>
               <span ng-switch-when="false">{{item[itemColumn.field]}}</span>
          </div>
</td>

在这里你可以找到完整的jsFiddle。如果您键入表格内的任何字母/单词，它将被突出显示。