1

我遇到了下一个问题。正如您在我的jsFiddle中看到的那样，我试图ng-bind-html-unsafe在指令中的模板内使用，而我传递的属性值item{{itemColumn.field}}取决于因为在 ng-repeat 内。问题是我在属性 highlight 为 true 的列中使用 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。

4

1 回答 1

0

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

 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。如果您键入表格内的任何字母/单词，它将突出显示。

于 2013-09-12T14:04:40.693 回答