使用角度将数据绑定到 div 中的单个单词

Question

我想突出显示文本中的一些单词并将它们绑定到我的数据，以便能够单击这些单词并更改范围内的一些变量。 我的数据模型中有一个单词列表，对于相同的数据我有两个视图：一个列表和包含单词的文本。

列表很容易用ng-repeat实现：我可以通过ng-click轻松过滤列表和处理item的点击。

对于“文本视图”我没有找到任何指令，所以我自己实现了它，通过打破文本并将它们包裹在跨度中以实现彩色背景效果。 我的问题是我不知道如何将数据绑定到这些跨度；此外，它们似乎不属于角度上下文，因此 ng-click 和其他指令将不起作用。 你怎么会意识到这样的事情？

我的目标是单击文档上的“Queensland”并展开列表中的“Queensland”条目。我目前在用户单击列表条目时执行相同操作，我将其展开以显示一些详细信息，只需使用 ng-show 观察范围内的变量。

这是笔

http://codepen.io/mendaomn/pen/LpRxOL

编辑 1： 好的，我遇到了其他问题，但现在我又回到了这个问题。我设法通过创建指令 reviewDoc

来解决它

 <div review-doc class="document"></div>

在指令中，将作用域链接到元素，在链接函数中

var underlinedText = highlightDocument(scope.data.document.text, scope.data.words, scope.filters.applyFilters);
var element = angular.element("<div>" + underlinedText + "</div>");
var test = $compile(element)(scope);
elt.html(test);

现在，在我的highlightDocument() 中，我基本上会浏览文档的内容，找到单词并用span 标签包围它们。这样的标签带有ng-click 属性，允许根据绑定的单词过滤左侧的表格。

这是跨度定义：

var boundData = JSON.stringify(word);
var tag_open = '<span ng-click=\'filters.toggleTag(' + boundData + ', $event)\' ng-class=\'{"document-highlight--selected": filters.isTagSelected(' + boundData + ') && filters.isSynonym(' + boundData + ',' + string + ')}\' class="document-highlight--bold" >';
var tag_close = "</span>";

其中boundData 是左侧表格中也可以看到的对象之一。它似乎工作得很好，但它很讨厌，让我觉得很奇怪，因为在 HTML 中你最终会检查出这种令人敬畏的东西：

<span ng-click="filters.toggleTag({"name":"Toads","class":"Animal","taxonomy":"GeoNat35","count":3,"score":0.87,"type":"Detected","offset":[{"firstchar":653,"lastchar":658},{"firstchar":787,"lastchar":792},{"firstchar":1103,"lastchar":1108}],"$$hashKey":"object:46"}, $event)" ng-class="{"document-highlight--selected": filters.isTagSelected({"name":"Toads","class":"Animal","taxonomy":"GeoNat35","count":3,"score":0.87,"type":"Detected","offset":[{"firstchar":653,"lastchar":658},{"firstchar":787,"lastchar":792},{"firstchar":1103,"lastchar":1108}],"$$hashKey":"object:46"}) && filters.isSynonym({"name":"Toads","class":"Animal","taxonomy":"GeoNat35","count":3,"score":0.87,"type":"Detected","offset":[{"firstchar":653,"lastchar":658},{"firstchar":787,"lastchar":792},{"firstchar":1103,"lastchar":1108}],"$$hashKey":"object:46"},"toads")}" class="document-highlight--bold">toads</span>

您能提出更好的解决方案吗？

Answer 1

在您的“文本视图”指令中添加一个绑定到父范围方法的属性，例如：

<my-directive on-word-click="onWordClick(word)" ...>

然后在您的指令中对每个突出显示的单词进行 ng-click 调用以单词作为参数的绑定函数。 关于如何传递参数的 angular 指令有些棘手，但如果您发布代码并需要帮助，该线程上的人将能够提供帮助。