Делаю кастомную всплывающую подсказку для различных длинных тестовых блоков (например, комментарии/описание).
Работает она следующим образом: На странице выводится краткий текст, при нажатии на этот текст появляется окошко, где уже полное описание.
Структура моей всплывающей подсказки следующая:
<custom-tooltip>
<title></title>
<description></description>
</custom-tooltip>
Где <title>
и <description>
- tranclude элементы.
Вся задумка в дом, что по дефолту в title выводится обрезанный description, который я туда скормлю, а description содержит полное описание, просто изначально скрыто. Но при нажатии на этот title должен появляться description.
Вопрос: как внутри directive обратиться к моему trancluded description, чтобы подключать/отключать класс видимости?
Привожу макет кода:
app.directive('customTooltip', function() {
return {
restrict: 'E',
scope: true,
transclude: {
'title': '?title',
'description': '?description'
},
templateUrl: 'tooltip.html',
link: function TooltipCtrl($scope, $element, $attrs) {
$element.bind('click', function(e) {
openFull();
});
function openFull() {
//Здесь надо получить необходимый элемент с описанием
}
}
};
});
Я пока додумался только до использования $element.children(), но мне почему то кажется, что есть более правильный вариант.
Рабочий пример находится здесь
ng-class
как советуют в ответе. В примере по ссылке есть атрибутsource
, а в примере тут - нет. Это была попытка что-то обойти? или так и задумывалось брать данные из этого атрибута, а не элементов?transclude
, если эти элементы не используются,а все берется из атрибута