Chỉ đọc phần này nếu bạn đang chỉ định động các chú giải công cụ
I E <div tooltip={{ obj.somePropertyThatMayChange }} ...></div>
Tôi gặp sự cố với chú giải công cụ động không phải lúc nào cũng cập nhật với chế độ xem. Ví dụ, tôi đang làm một cái gì đó như thế này:
Điều này không hoạt động nhất quán
<div ng-repeat="person in people">
<span data-toggle="tooltip" data-placement="top" title="{{ person.tooltip }}">
{{ person.name }}
</span>
</div>
Và kích hoạt nó như vậy:
$timeout(function() {
$(document).tooltip({ selector: '[data-toggle="tooltip"]'});
}, 1500)
Tuy nhiên, vì mảng người của tôi sẽ thay đổi các chú giải công cụ của tôi sẽ không luôn cập nhật. Tôi đã thử mọi cách sửa chữa trong chủ đề này và những người khác không gặp may. Sự cố dường như chỉ xảy ra khoảng 5% thời gian và gần như không thể lặp lại.
Thật không may, những chú giải công cụ này là nhiệm vụ quan trọng đối với dự án của tôi và việc hiển thị chú giải công cụ không chính xác có thể rất tệ.
Điều gì dường như là vấn đề
Bootstrap đang sao chép giá trị của thuộc titletính sang một thuộc tính mới data-original-titlevà xóa thuộc titletính (đôi khi) khi tôi kích hoạt các toooltips. Tuy nhiên, khi tôi title={{ person.tooltip }}thay đổi giá trị mới sẽ không phải lúc nào cũng được cập nhật vào thuộc tính data-original-title. Tôi đã thử hủy kích hoạt chú giải công cụ và kích hoạt lại chúng, phá hủy chúng, liên kết trực tiếp với thuộc tính này ... mọi thứ. Tuy nhiên, mỗi thứ đều không hoạt động hoặc tạo ra các vấn đề mới; chẳng hạn như các thuộc tính titlevà data-original-titleđều bị xóa và không bị ràng buộc khỏi đối tượng của tôi.
Những gì đã làm việc
Có lẽ là đoạn mã xấu xí nhất mà tôi từng đẩy, nhưng nó đã giải quyết được vấn đề nhỏ nhưng quan trọng này đối với tôi. Tôi chạy mã này mỗi khi chú giải công cụ được cập nhật với dữ liệu mới:
$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);
Những gì đang xảy ra ở đây về bản chất là:
- Chờ một khoảng thời gian (1500 mili giây) để chu kỳ thông báo hoàn tất và các thông
titlebáo sẽ được cập nhật.
- Nếu có một thuộc
titletính không trống (tức là nó đã thay đổi), hãy sao chép nó vào thuộc data-original-titletính đó để nó được lấy bằng các công cụ của Bootstrap.
- Kích hoạt lại chú giải công cụ
Hy vọng câu trả lời dài này sẽ giúp những người có thể đang gặp khó khăn như tôi.