Как активировать всплывающую подсказку, когда многоточие активировано с помощью директивы в угловых 5? - PullRequest
Новая
       46

Как активировать всплывающую подсказку, когда многоточие активировано с помощью директивы в угловых 5?

0 голосов
/ 24 сентября 2018

У меня есть следующий шаблон с классом css "dotdotdot", который правильно добавляет многоточие к переполнению. 

<div class="dotdotdot">{{data.trip.name}}</div>

Я пытаюсь сделать здесь директиву, которая добавляет всплывающую подсказку, когдаМноготочие активировано только.

Вот текущий код из директивы: 

import { Directive, OnInit, ElementRef } from '@angular/core';

declare var $: any;

@Directive({
  selector: '.dotdotdot'
})
export class DotdotdotDirective implements OnInit {

  private el: HTMLElement;
  constructor(elRef: ElementRef) {
    this.el = elRef.nativeElement;
}

ngOnInit() {           
         if (this.isEllipsisActive(this.el)) {   
            // TODO add title attribute to the div with value from text         
            $(this.el).tooltip();     
         }         
}

isEllipsisActive(e) {
     return (e.offsetWidth < e.scrollWidth);
}

}

У меня есть две проблемы в приведенном выше коде:

  1. isEllipsisActive is not isработая, мне нужен способ идентификации многоточия.
  2. Мне нужно знать, как динамически добавлять атрибут title или [title] из $ (this.el).Значением является текст из div.

Спасибо!

Ответы [ 2 ]

0 голосов
/ 24 февраля 2019

Отличный ответ от ofir - Вот модифицированная версия, которая будет работать, если текст изменится после инициализации. 

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[isEllipsisActive]'
})

export class isEllipsisActiveDirective {

  constructor(private elementRef: ElementRef) {}

  @HostListener('mouseenter')
  onMouseEnter(): void {
    setTimeout(() => {
      const element = this.elementRef.nativeElement;
      if (element.offsetWidth < element.scrollWidth) {
        element.title = element.textContent;
      }
      else if (element.title) element.removeAttribute('title'); 
    }, 500);
  }
}
0 голосов
/ 24 сентября 2018

Вы можете создать эту директиву: 

import { AfterViewInit, Directive, ElementRef, EventEmitter, Output } from 

'@angular/core';

@Directive({
  selector: '[isEllipsisActive]'
})
export class IsEllipsisActiveDirective implements AfterViewInit {

  constructor(private elementRef: ElementRef) {}

  ngAfterViewInit(): void {
    setTimeout(() => {
      const element = this.elementRef.nativeElement;
      if(element.offsetWidth < element.scrollWidth){
        element.title = element.innerHTML;
      }
    }, 500);
  }
}

посмотрите на это https://stackblitz.com/edit/angular-qjmg7m?file=src%2Fapp%2Fis-ellipsis-active.directive.ts

...