Interfejs użytkownika Angular UI Przekątna ekranu z podpowiedziami

Question

Mam etykietkę narzędzia (http://angular-ui.github.io/bootstrap/) z powiadomieniem o stanie, ale gdy te powiadomienia są zbyt duże, przepełniają one ograniczenia ekranu. tutaj jest wydruk tego, co się dzieje:

nie mogłem znaleźć żadnego atrybutu w kątowym UI, który zajmuje się tym problemem.

z góry dzięki!

Answer 1

To rozwiązanie nie używa Angular-UI, tylko Angular i Bootstrap. Bootstrap nie jest koniecznie wymagane, tylko upraszcza proces trochę:
http://plnkr.co/edit/jLThSTrLUapAG8OLW44m?p=preview

Zanim przejdziemy dalej, alternatywą dla tego przykładu byłoby dodać klasę CSS z word-wrap i white-space właściwości do klasy podpowiedzi. Używając narzędzia programistycznego Chrome lub Firefoksa, sprawdzaj elementy, aż znajdziesz klasy odpowiedzialne za ustawienie etykiety narzędziowej; następnie dodaj do nich te właściwości w niestandardowym dokumencie CSS style.css.

Teraz do tego konkretnego rozwiązania, tworzymy dyrektywę podpowiedzi i pozwolić mu wziąć atrybut kwalifikacyjny, aby określić pozycjonowanie

kątowa kod, gdzie zniszczymy podpowiedź po mamy zrobić, aby uniknąć wycieku pamięci:

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'); 
       }); 
       } 
      } 
     }) 

kod CSS, gdzie musimy zastąpić niektóre domyślne bootstrap:

.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; 
} 

Answer 2

podejrzewam popover dziedziczy więc informacje o pozycjonowaniu z kontenera, w którym się znajduje. Spróbuj ustawić popover-append-to-body, aby nie znajdował się już w tym kontenerze.

Jest to błąd w bieżącym wydaniu Kątowymi UI, więc rzeczywiście trzeba ustawić:

popover-append-to-body="true" 

jednak, że zostanie ustalona na następnej wersji, więc nie potrzebne = "true "część, po prostu ustaw atrybut.