Saya mencoba menggunakan AngularJS dengan Tippy.JS untuk tooltips.

Tooltip template HTML Tippy (#creating-html-templates) mengharuskan kita untuk gunakan style="display: none" untuk template, dan sisanya akan ditangani.

Saya ingin menggunakan fitur angularjs di templat tooltip tetapi gagal. masukkan deskripsi gambar di sini#fiddle

Jika Anda menghapus style="display: none" itu berhasil, tetapi Tippy tidak.

Apakah ada panduan untuk ini?

Perbarui Solusi @Razzildinho hanya berfungsi untuk merender nilainya. tetapi tidak dapat berkomunikasi kembali ke pengontrol. Ini adalah pengikatan data satu arah, model hingga tippy.

Inside Tippy:

enter image description here

Di luar:

enter image description here

Biola

0
Shank 15 Agustus 2017, 22:58

2 jawaban

Jawaban Terbaik

Menggunakan id elemen sebagai opsi html menghapus semua ikatan javascript. Untuk mempertahankannya gunakan elemen DOM. Anda juga harus menambahkan di dalam elemen yang memiliki pengontrol Anda terpasang.

<!-- Add ID to the controller div -->
<div ng-controller="FrameController as vm" id="controller">

Anda juga perlu menghapus display: none; dari html template Anda. Dari dokumentasi:

Jika Anda ingin mengkloning konten template ke dalam tooltip, tentukan id template di pengaturan html. Jika tidak, gunakan elemen DOM itu sendiri, yang memungkinkan Anda untuk membuat pendengar tetap terhubung. Jika Anda menggunakan pilihan elemen DOM, pastikan tidak disembunyikan dengan display: none;.

Dan kemudian javascript Anda untuk tippy seharusnya:

setTimeout(function() {
  angular.bootstrap(document.getElementById('body'), ['app']);
  tippy('.tippy', {
    position: 'bottom',
    animation: 'fade',
    arrow: true,
    interactive: true,
    /* The following 2 lines are new */
    html: document.getElementById('my-template-id'),
    appendTo: document.getElementById('controller')
  })
});
5
Razzildinho 16 Agustus 2017, 14:18

Itu karena html dan widget yang dihasilkan bekerja di luar cakupan sudut. Hal yang sama akan terjadi jika Anda mencoba menerapkan widget boostrap dan menambahkan beberapa perilaku sudut. Itu sebabnya boostrap-ui ada, untuk menjembatani dua dunia itu.

Cara terbaik untuk mengatasinya adalah dengan membuat arahan yang menautkan pluging js Anda dengan angular.js. Saat melakukan direktif, Anda mungkin perlu membuat ulang plugin saat ekspresi berubah dengan menyetel pengamat di vm.message.

Lihat posting ini sebagai contoh: http://bencentra .com/code/2015/09/29/jquery-plugins-angular-directives.html

1
bruno.bologna 15 Agustus 2017, 20:41