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

AngularJS - 指令内的ng-bind-html-unsafe无法正常工作

1 个答案: