0

Делаю кастомную всплывающую подсказку для различных длинных тестовых блоков (например, комментарии/описание).

Работает она следующим образом: На странице выводится краткий текст, при нажатии на этот текст появляется окошко, где уже полное описание.

Структура моей всплывающей подсказки следующая:

<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(), но мне почему то кажется, что есть более правильный вариант.

Рабочий пример находится здесь

7
  • можешь сделать рабочий пример на plunkr?
    – Grundy
    15 июн 2016 в 10:20
  • @Grundy рабочий пример сделал. Вопрос уточняю: там нужная мне "всплывашка" находится через getElementById - я же хочу обратиться при помощи scope самой директивы, как бы. Т.е. не держать айдишник, а работать только с тем, что у меня есть в рамках scope. 15 июн 2016 в 14:23
  • да, похоже достаточно воспользоваться ng-class как советуют в ответе. В примере по ссылке есть атрибут source, а в примере тут - нет. Это была попытка что-то обойти? или так и задумывалось брать данные из этого атрибута, а не элементов?
    – Grundy
    15 июн 2016 в 15:13
  • @Grundy это просто процесс расширения функционала. В примере тут, как вы правильно заметили, sourcе'a нет, но он был добавлен позднее. Атрибут используется для скармливания данных. Т.е. вот у меня есть огромная простыня комментария - вывести надо небольшую часть, а при клике показать уже всю: я отдаю директиве весь текст через атрибут source, далее его там уже обрезаю и вывожу, как хочу. 16 июн 2016 в 7:54
  • Я просто тогда не совсем понимаю смысл в transclude, если эти элементы не используются,а все берется из атрибута
    – Grundy
    16 июн 2016 в 7:58

1 ответ 1

0

Может это вам поможет? ngClass - https://docs.angularjs.org/api/ng/directive/ngClass. А еще лучше глянуть в той же документации ngIf или ngShow.

3
  • Да, видимо это то, чем придётся воспользоваться. Я представлял, что в ангуляре есть какой-нибудь инструмент для работы с элементами, для которых я делаю transclude. Если быть совсем точным - он есть, но мне нужно задавать мой шаблон прямо в директиве и использовать compile. В случае же, когда шаблон берётся из отдельной html-ки, такая штука не пройдёт. Ответ принимаю, спасибо =) 16 июн 2016 в 7:57
  • @Mr.Brightside, В случае же, когда шаблон берётся из отдельной html-ки, такая штука не пройдёт. - почему? всегда можно загрузить этот шаблон и скормить его сервису $compile.
    – Grundy
    16 июн 2016 в 7:59
  • @Grundy этого не знал =( а где можно подсмотреть примеры? Т.е. так, чтобы вот у меня для title свой compile, у description - свой 16 июн 2016 в 8:03

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.