Блог

У меня есть всплывающая подсказка (http://angular-ui.github.io/bootstrap /) с уведомлением о состоянии, но когда это уведомление слишком велико, оно выходит за пределы экрана. вот распечатка того, что происходит:

Я не смог найти ни одного атрибута в angular ui, который бы решал эту проблему.

заранее спасибо!

Это решение не использует Angular-UI, только Angular и Bootstrap. Загрузка не обязательно требуется, просто немного упрощает процесс:
http://plnkr.co/edit/jLThSTrLUapAG8OLW44m?p=preview

Прежде чем я пойду дальше, альтернативой этому примеру было бы добавить CSS-класс со свойствами переноса слов и пробелов в ваш класс всплывающих подсказок. Используя инструмент разработчика Chrome или Firefox, проверяйте элементы, пока не найдете классы, ответственные за настройку всплывающей подсказки ui; затем добавьте к ним эти свойства в свой пользовательский CSS-документ style.css.

Теперь, для этого конкретного решения, мы создаем директиву всплывающей подсказки и разрешаем ей использовать атрибут размещения для определения местоположения

Угловой код, в котором мы уничтожаем всплывающую подсказку после завершения, чтобы предотвратить утечку памяти:

 var app = angular.module('test', []);

angular.module('test').directive('tooltip', function () {
           return {
              restrict: 'A',
              link: function (scope, element, attrs) {
                 $(element)
                         .attr('title', attrs.tooltip)
                         .tooltip({placement: attrs.placement});
                 scope.$on('$destroy', function() {
                    element.tooltip('destroy');
                 });
              }
           }
        }) 
 

Код CSS, в котором мы должны переопределить некоторые значения по умолчанию для начальной загрузки:

 .tooltip-inner {
   width: auto;
   min-width: 180px;
   background-color: #c0d3d2;
   color: #000000;
   font-weight: 600;
   margin: 0 5px 0 -5px;
   /*margin-left: -5px;*/
}

/* Make tooltips opaque */
.tooltip.in { opacity: 1.8; filter: alpha(opacity=100); }
/*Change tooltip arrow color for bottom placement*/
.tooltip.bottom .tooltip-arrow {
   top: 0;
   left: 50%;
   margin-left: -5px;
   border-bottom-color: #c0d3d2;
   border-width: 0 5px 5px;
}
 

Я подозреваю, что всплывающее окно наследует некоторую информацию о местоположении из контейнера, в котором оно находится. Попробуйте настроить popover-append-to-body так, чтобы его больше не было в этом контейнере.

В текущей версии Angular UI есть ошибка, поэтому вам действительно нужно установить:

 popover-append-to-body="true"
 

Но это будет исправлено в следующем выпуске, так что вам не нужна часть =»true», просто установите атрибут.

Мне пришлось сделать пару вещей, чтобы заставить мое всплывающее окно «работать», используя uib-popover-template

1. Добавьте popover-append-to-body="true" атрибут.
   • Это добавляет всплывающее $body окно вместо родительского элемента
2. Добавьте popover-placement="auto top" атрибут.
   • Он попытается отобразить top, в противном случае попытается более удобное для пользователя размещение.
   • Я пробовал с auto top-left помощью, но, похоже, он сжимает очень большие объемы текста.
3. Содержимое, заключенное в <div style="max-height: 300px; overflow: auto;">
   • Это наложит границу на контейнер и добавит прокрутку только тогда, когда это необходимо.