Korzystanie z podpowiedzi Bootstrap w AngularJS

Próbuję użyć podpowiedzi Bootstrap w mojej aplikacji. Moja aplikacja korzysta z AngularJS Obecnie mam:

<button type="button" class="btn btn-default" 
        data-toggle="tooltip" data-placement="left"
        title="Tooltip on left">
            Tooltip on left
</button>

Myślę, że muszę użyć

$("[data-toggle=tooltip]").tooltip();

Jednak nie jestem pewien. Nawet jeśli dodam powyższą linię, mój kod nie działa. Staram się unikać używania bootstrapu UI, ponieważ ma więcej niż potrzebuję. Jednak gdybym miał dołączyć tylko element podpowiedzi, byłbym na to otwarty. Jednak nie wiem, jak to zrobić.

Czy ktoś może mi pokazać, jak sprawić, by Bootstrap Tooltip działał z AngularJS?

Aby podpowiedzi działały w pierwszej kolejności, musisz je zainicjować w swoim kodzie. Ignorując AngularJS na sekundę, w ten sposób można uzyskać podpowiedzi do pracy w jQuery:

$(document).ready(function(){
    $('[data-toggle=tooltip]').hover(function(){
        // on mouseenter
        $(this).tooltip('show');
    }, function(){
        // on mouseleave
        $(this).tooltip('hide');
    });
});

Będzie to również działać w aplikacji AngularJS, o ile nie jest to treść renderowana przez Angular (np .: ng-repeat). W takim przypadku musisz napisać dyrektywę, która to obsłuży. Oto prosta dyrektywa, która zadziałała dla mnie:

app.directive('tooltip', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            element.hover(function(){
                // on mouseenter
                element.tooltip('show');
            }, function(){
                // on mouseleave
                element.tooltip('hide');
            });
        }
    };
});

Następnie wszystko, co musisz zrobić, to dołączyć atrybut „tooltip” do elementu, w którym ma się pojawić podpowiedź:

<a href="#0" title="My Tooltip!" data-toggle="tooltip" data-placement="top" tooltip>My Tooltip Link</a>

Mam nadzieję, że to pomoże!

Najlepszym rozwiązaniem, jakie udało mi się wymyślić, jest dodanie atrybutu „onmouseenter” do elementu w następujący sposób:

<button type="button" class="btn btn-default" 
    data-placement="left"
    title="Tooltip on left"
    onmouseenter="$(this).tooltip('show')">
</button>

Prosta odpowiedź - za pomocą UI Bootstrap ( ui.bootstrap.tooltip )

Wydaje się, że istnieje kilka bardzo złożonych odpowiedzi na to pytanie. Oto, co zadziałało dla mnie.

1. Zainstaluj Bootstrap UI -$ bower install angular-bootstrap

2. Wstaw UI Bootstrap jako zależność - angular.module('myModule', ['ui.bootstrap']);

3. Użyj dyrektywy uib-tooltip w swoim html.

<button class="btn btn-default"
        type="button"
        uib-tooltip="I'm a tooltip!">
     I'm a button!
</button>

Jeśli budujesz kątowym aplikację, można użyć jQuery, ale jest wiele dobrych powodów, aby unikać go na rzecz bardziej kanciastych napędzanych paradygmatów. Możesz nadal używać stylów dostarczonych przez bootstrap, ale zastąp wtyczki jQuery natywnym angularem, używając UI Bootstrap

Uwzględnij pliki Boostrap CSS, Angular.js i ui.Bootstrap.js:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.angularjs.org/1.2.20/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

Upewnij się, że wykonałeś wstrzyknięcie ui.bootstrappodczas tworzenia modułu w następujący sposób:

var app = angular.module('plunker', ['ui.bootstrap']);

Następnie możesz użyć dyrektyw kątowych zamiast atrybutów danych zebranych przez jQuery:

<button type="button" class="btn btn-default" 
        title="Tooltip on left" data-toggle="tooltip" data-placement="left"
        tooltip="Tooltip on left" tooltip-placement="left" >
  Tooltip on left
</button>

Demo w Plunkerze

Unikanie UI Bootstrap

jQuery.min.js (94kb) + Bootstrap.min.js (32kb) również daje więcej, niż potrzebujecie, i znacznie więcej niż ui-bootstrap.min.js (41kb) .

A czas spędzony na pobieraniu modułów to tylko jeden aspekt wydajności.

Jeśli naprawdę chciałeś załadować tylko potrzebne moduły, możesz „Utwórz kompilację” i wybrać podpowiedzi ze strony Bootstrap-UI . Możesz też przejrzeć kod źródłowy podpowiedzi i wybrać to, czego potrzebujesz.

Tutaj zminimalizowana niestandardowa kompilacja z tylko etykietkami narzędzi i szablonami (6kb)

Czy dołączyłeś Bootstrap JS i jQuery?

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

Jeśli jeszcze ich nie załadowałeś, Angular UI ( http://angular-ui.github.io/bootstrap/ ) może nie być zbyt dużym obciążeniem. Używam tego z moją aplikacją Angular i ma dyrektywę Tooltip. Spróbuj użyćtooltip="tiptext"

<button type="button" class="btn btn-default" 
        data-toggle="tooltip" data-placement="left"
        title="Tooltip on left"
        tooltip="This is a Bootstrap tooltip"
        tooltip-placement="left" >
            Tooltip on left
</button>

Napisałem prostą dyrektywę kątową, która dobrze nam się sprawdziła.

Oto demo: http://jsbin.com/tesido/edit?html,js,output

Dyrektywa (dla Bootstrap 3) :

// registers native Twitter Bootstrap 3 tooltips
app.directive('bootstrapTooltip', function() {
  return function(scope, element, attrs) {
    attrs.$observe('title',function(title){
      // Destroy any existing tooltips (otherwise new ones won't get initialized)
      element.tooltip('destroy');
      // Only initialize the tooltip if there's text (prevents empty tooltips)
      if (jQuery.trim(title)) element.tooltip();
    })
    element.on('$destroy', function() {
      element.tooltip('destroy');
      delete attrs.$$observers['title'];
    });
  }
});

Uwaga: Jeśli używasz Bootstrap 4, na liniach 6 i 11 powyżej będziesz musiał wymienić tooltip('destroy')z tooltip('dispose')(dzięki user1191559 tego upadate )

Po prostu dodaj bootstrap-tooltipjako atrybut do dowolnego elementu z rozszerzeniem title. Angular będzie monitorować zmiany titlew pliku, ale poza tym przekaże obsługę podpowiedzi do Bootstrap.

Pozwala to również na użycie jakichkolwiek rodzimych opcji podpowiedzi Bootstrap jako data-atrybutów w normalny sposób Bootstrap.

Znacznik :

<div bootstrap-tooltip data-placement="left" title="Tooltip on left">
        Tooltip on left
</div>

Oczywiście nie ma to wszystkich wyszukanych powiązań i zaawansowanej integracji, które oferują AngularStrap i UI Bootstrap, ale jest to dobre rozwiązanie, jeśli już używasz JS Bootstrap w swojej aplikacji Angular i potrzebujesz tylko podstawowego pomostu z podpowiedziami w całej aplikacji bez modyfikowanie kontrolerów lub zarządzanie zdarzeniami myszy.

Możesz użyć selector opcji dla dynamicznych aplikacji jednostronicowych:

jQuery(function($) {
    $(document).tooltip({
        selector: '[data-toggle="tooltip"]'
    });
});

jeśli podano selektor, obiekty etykietki zostaną delegowane do określonych obiektów docelowych. W praktyce jest to używane, aby umożliwić dodawanie podpowiedzi do dynamicznej zawartości HTML.

Możesz utworzyć prostą dyrektywę, taką jak ta:

angular.module('myApp',[])
    .directive('myTooltip', function(){
        return {
            restrict: 'A',
            link: function(scope, element){
                element.tooltip();
            }
        }
    });

Następnie dodaj własną dyrektywę tam, gdzie jest to konieczne:

<button my-tooltip></button>

Możesz to zrobić za pomocą AngularStrap which

to zestaw natywnych dyrektyw, które umożliwiają bezproblemową integrację Bootstrap 3.0+ z aplikacją AngularJS 1.2+. ”

Możesz wstrzyknąć całą bibliotekę w ten sposób:

var app = angular.module('MyApp', ['mgcrea.ngStrap']); 

Lub użyj tylko funkcji podpowiedzi w następujący sposób:

var app = angular.module('MyApp', ['mgcrea.ngStrap.tooltip']); 

Demo w Stack Snippets

var app = angular.module('MyApp', ['mgcrea.ngStrap']);  

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"></script>

<div ng-app="MyApp" class="container" >

  <button type="button" 
          class="btn btn-default" 
          data-trigger="hover" 
          data-placement="right"
          data-title="Tooltip on right"
          bs-tooltip>
    MyButton
  </button>

</div>

Najprościej dodać $("[data-toggle=tooltip]").tooltip();do odpowiedniego kontrolera.

Pamiętaj, że jeśli chcesz używać podpowiedzi bootstrap w angularjs, to kolejność skryptów, jeśli używasz jquery-ui, powinna to być:

• jQuery
• jQuery UI
• Bootstap

Jest wypróbowany i przetestowany

Przeczytaj ten tekst tylko wtedy, gdy przypisujesz podpowiedzi dynamicznie

to znaczy <div tooltip={{ obj.somePropertyThatMayChange }} ...></div>

Miałem problem z dynamicznymi podpowiedziami, które nie zawsze były aktualizowane wraz z widokiem. Na przykład robiłem coś takiego:

To nie działało konsekwentnie

<div ng-repeat="person in people">
    <span data-toggle="tooltip" data-placement="top" title="{{ person.tooltip }}">
      {{ person.name }}
    </span> 
</div> 

I aktywując go tak:

$timeout(function() {
  $(document).tooltip({ selector: '[data-toggle="tooltip"]'});
}, 1500)

Jednak ponieważ moja tablica ludzi zmieniłaby się, moje podpowiedzi nie zawsze byłyby aktualizowane. Próbowałem każdej poprawki w tym wątku i innych bez powodzenia. Wydawało się, że usterka występuje tylko w około 5% przypadków i była prawie niemożliwa do powtórzenia.

Niestety, te podpowiedzi mają kluczowe znaczenie dla mojego projektu, a wyświetlanie nieprawidłowych podpowiedzi może być bardzo złe.

Co wydawało się być problemem

Bootstrap kopiował wartość titlewłaściwości do nowego atrybutu data-original-titlei usuwał titlewłaściwość (czasami), gdy aktywowałem toooltips. Jednak gdy my title={{ person.tooltip }}zmieniłby nową wartość, nie zawsze byłaby aktualizowana we właściwości data-original-title. Próbowałem dezaktywować podpowiedzi i ponownie je aktywować, zniszczyć, powiązać bezpośrednio z tą właściwością ... wszystko. Jednak każdy z nich albo nie działał, albo stworzył nowe problemy; takie jak atrybuty titlei data-original-titlesą usuwane i nie są związane z moim obiektem.

Co zadziałało

Być może najbardziej brzydki kod, jaki kiedykolwiek pchnąłem, ale rozwiązał ten mały, ale istotny problem. Uruchamiam ten kod za każdym razem, gdy podpowiedź jest aktualizowana o nowe dane:

$timeout(function() {
    $('[data-toggle="tooltip"]').each(function(index) {
      // sometimes the title is blank for no apparent reason. don't override in these cases.
      if ($(this).attr("title").length > 0) {
        $( this ).attr("data-original-title", $(this).attr("title"));
      }
    });
    $timeout(function() {
      // finally, activate the tooltips
      $(document).tooltip({ selector: '[data-toggle="tooltip"]'});
    }, 500);
}, 1500);

Zasadniczo dzieje się tutaj:

• Poczekaj trochę czasu (1500 ms) na zakończenie cyklu podsumowania i titlezaktualizowanie s.
• Jeśli istnieje titlewłaściwość, która nie jest pusta (tj data-original-title. Uległa zmianie), skopiuj ją do właściwości, aby została pobrana przez narzędzia Bootstrap.
• Ponownie aktywuj podpowiedzi

Mam nadzieję, że ta długa odpowiedź pomoże komuś, kto mógł walczyć tak jak ja.

Wypróbuj etykietkę (ui.bootstrap.tooltip). Zobacz dyrektywy Angular dla Bootstrap

<button type="button" class="btn btn-default" tooltip-placement="bottom" uib-tooltip="tooltip message">Test</button>

Zaleca się unikanie kodu JavaScript w górnej części AngularJS

aby otrzymywać podpowiedzi do odświeżania po zmianie modelu , po prostu używam data-original-titlezamiast title.

na przykład

<i class="fa fa-gift" data-toggle="tooltip" data-html="true" data-original-title={{getGiftMessage(gift)}} ></i>

zwróć uwagę, że inicjalizuję użycie podpowiedzi w ten sposób:

<script type="text/javascript">
    $(function () {
        $("body").tooltip({ selector: '[data-toggle=tooltip]' });
    })
</script>

wersje:

• AngularJS 1.4.10
• bootstrap 3.1.1
• jQuery: 1.11.0

AngularStrap nie działa w IE8 z angularjs w wersji 1.2.9, więc nie używaj tego, jeśli Twoja aplikacja musi obsługiwać IE8

doskonała odpowiedź @aStewartDesign:

.directive('tooltip', function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs){
      element.hover(function(){
        element.tooltip('show');
      }, function(){
        element.tooltip('hide');
      });
    }
  };
});

Nie ma potrzeby korzystania z jquery, jest to późna odpowiedź, ale doszedłem do wniosku, że skoro jest to najczęściej wybierane miejsce, powinienem to zaznaczyć.

zainstaluj zależności:

npm install jquery --save
npm install tether --save
npm install bootstrap@version --save;

następnie dodaj skrypty w swoim angular-cli.json

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "script.js"
    ]

następnie utwórz plik script.js

$("[data-toggle=tooltip]").tooltip();

teraz zrestartuj serwer.

Ze względu na funkcję podpowiedzi musisz powiedzieć angularJS, że używasz jQuery.

Oto twoja dyrektywa:

myApp.directive('tooltip', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('mouseenter', function () {
                jQuery.noConflict();
                (function ($) {
                    $(element[0]).tooltip('show');
                })(jQuery);
            });
        }
    };
});

a oto jak korzystać z dyrektywy:

<a href="#" title="ToolTip!" data-toggle="tooltip" tooltip></a>