javascript - 使用 Angular 将数据绑定(bind)到 div 中的单个单词

Question

我想突出显示文本中的一些单词并将它们绑定(bind)到我的数据，以便能够单击这些单词并更改范围中的一些变量。 我的数据模型中有一个单词列表，并且同一数据有两个 View :列表和包含单词的文本。

使用 ng-repeat 可以轻松实现列表:我可以轻松过滤列表并通过 ng-click 处理对项目的点击。

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

我的目标是单击文档上的“昆士兰”并展开列表中的“昆士兰”条目。目前，当用户单击列表条目时，我会执行相同的操作，通过简单地使用 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 属性，该属性允许根据绑定(bind)的单词过滤左侧的表格。

这是跨度定义:

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

在“ TextView ”指令中添加一个绑定(bind)到父作用域方法的属性，例如:

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

然后在您的指令中，对每个突出显示的单词进行 ng 单击，以该单词作为参数调用绑定(bind)函数。 Angular Directive(指令)在如何传递参数方面有一些技巧，但如果您发布代码并需要一些帮助，此线程上的人员将能够提供帮助。