将数据绑定到角度为

Question

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

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

对于“文本视图”，我没有找到任何指令，所以我自己实现了它，通过打破文本并将它们包裹在跨度中以实现彩色背景效果。 我的问题是我不知道如何将数据绑定到那些范围;而且，它们似乎不属于角度上下文，因此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属性，允许根据绑定的单词过滤左侧的表。

这是范围定义：

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

在“text view”指令中添加一个绑定到父作用域方法的属性，如：

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

然后在你的指令中，对每个突出显示的单词进行ng-click，将单词作为参数调用绑定函数。 关于如何传递参数的角度指令有一些棘手的问题，但是如果你发布你的代码并需要一些帮助，那么这个线程的人就能够提供帮助。