AngularJS - отображать HTML во всплывающей подсказке - PullRequest
Новая
       9

AngularJS - отображать HTML во всплывающей подсказке

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

Так что в основном я отображаю некоторый текст с ng-bind-html на странице, так как текст состоит из элемента html, и у меня есть требование показывать тот же текст при наведении на него курсора.

Я создал класс CSS, который будет отображать тот же текст при наведении курсора, но HTML-тег, который будет отображаться как текст.я нашел здесь , который говорит, что это невозможно.

Я использую angularjs, ниже HTML 

<div ng-controller="foo">
    <p class="ellipsis" ng-bind-html="bar" data-text="{{bar}}"></p>
</div>

Это мой контроллер 

angular.module('myapp', ['ngSanitize']).controller('foo', function($scope) {
$scope.bar = "<h1>this is bar</h1>"; }); 

angular.bootstrap(document, ['myapp']);

demolink

Можно ли отобразить его в виде обычного HTML?

Ответы [ 2 ]

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

Хорошо, пожалуйста, проверьте этот код, также вот рабочий пример. https://jsfiddle.net/nezir/tbutbap3/667/ можно обновить, обновив в соответствии с вашими потребностями.

Я изменил текст и удалил теги h1 из текста.Кроме того, обновлен CSS, так что текстовый класс по умолчанию будет использовать размер шрифта h1 по умолчанию, который в большинстве случаев составляет 2em или 24px, а также добавил здесь некоторое жирное свойство, такое как font-weight: 700;, которое вы

Также обновил класс наведения мышиfont-size: 1em;.

Я думаю, что это вам нужно в конце.Как правило, обновляйте классы CSS, если вам нужно манипулировать размером текстового значения или любым другим свойством. 

angular.module('myapp', ['ngSanitize'])
.controller('foo', function($scope) {
    $scope.bar = "this is bar";
});

angular.bootstrap(document, ['myapp']);


.ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1;
    font-size: 2em;
    font-weight:700;
    }

    .ellipsis:focus:after, .ellipsis:hover:after {
    content: attr(data-text);
    overflow: visible;
    text-overflow: inherit;
    background: #191919;
    position: absolute;
    border-radius:0.4rem;
    padding: 0 .5rem;
    white-space: normal;
    word-wrap: break-word;
    display: block;
    color: white;
    z-index: 1;
     font-size: 1em;
    margin-right: 13px;
    opacity: 1.1;
    margin-top: 0rem;
}
0 голосов
/ 26 сентября 2018

Нет, это невозможно, потому что css content: attr(); в вашем случае: 

.ellipsis:focus:after, .ellipsis:hover:after {
    content: attr(data-text);

принимает только разрешенный список типов.Список не содержит тегов html / html.Вот допустимые типы: 

<type-or-unit> = string | integer | color | url | integer | number | length | angle | time | frequency | em | ex | px | rem | vw | vh | vmin | vmax | mm | q | cm | in | pt | pc | deg | grad | rad | ms | s | Hz | kHz | %

Есть некоторые эксперименты по включению туда шестнадцатеричных значений, но HTML-теги не будут работать.

Вот более подробная информация об этом: https://developer.mozilla.org/en-US/docs/Web/CSS/attr

...