Я хочу выделить некоторые слова в тексте и привязать их к своим данным, чтобы иметь возможность щелкнуть по этим словам и изменить некоторые переменные в области видимости. У меня есть список слов в моей модели данных, и у меня есть два представления для одних и тех же данных: список и текст, содержащий слова.
Список легко реализовать с помощью ng-repeat: я могу легко фильтровать список и обрабатывать клики по элементам с помощью ng-click.
Для «текстового представления» я не нашел никакой директивы, поэтому я реализовал это самостоятельно, разбивая текст и оборачивая его в промежутки, чтобы реализовать эффект цветного фона. Моя проблема в том, что я не знаю, как привязать данные к этим промежуткам; кроме того, они, похоже, не относятся к контексту 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, который позволяет фильтровать таблицу слева на основе связанного слова.
Вот определение диапазона:
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>
Не могли бы вы предложить лучшее решение?
