툴팁을 동적으로 할당하는 경우에만 이것을 읽으십시오.
즉 <div tooltip={{ obj.somePropertyThatMayChange }} ...></div>
항상 뷰로 업데이트되지 않는 동적 도구 설명에 문제가 있습니다. 예를 들어, 다음과 같은 작업을했습니다.
일관되게 작동하지 않았습니다.
<div ng-repeat="person in people">
<span data-toggle="tooltip" data-placement="top" title="{{ person.tooltip }}">
{{ person.name }}
</span>
</div>
다음과 같이 활성화합니다.
$timeout(function() {
$(document).tooltip({ selector: '[data-toggle="tooltip"]'});
}, 1500)
그러나 내 사람들 배열이 변경되므로 도구 설명이 항상 업데이트되는 것은 아닙니다. 이 스레드와 다른 스레드에서 모든 수정을 시도했지만 운이 없었습니다. 결함은 약 5 %의 시간 동안 만 발생하는 것처럼 보였으며 반복하기가 거의 불가능했습니다.
안타깝게도 이러한 툴팁은 내 프로젝트에 중요하며 잘못된 툴팁을 표시하는 것은 매우 나쁠 수 있습니다.
문제인 것 같던 것
부트 스트랩은 title속성 값을 새 속성 에 복사 하고 톨팁을 활성화 할 때 속성을 data-original-title제거 title했습니다 (때로는). 그러나 내가 title={{ person.tooltip }}변경할 때 새 값이 항상 속성으로 업데이트되는 것은 아닙니다 data-original-title. 툴팁을 비활성화하고 다시 활성화하고, 파괴하고,이 속성에 직접 바인딩 해 보았습니다. 그러나 이들 각각은 작동하지 않거나 새로운 문제를 만들었습니다. 예를로 title하고 data-original-title모두 제거되는 내 개체에서 유엔이 바인딩 속성.
작동 한 것
아마도 내가 지금까지 밀어 낸 코드 중 가장 추악한 코드 일 것입니다. 그러나 그것은이 작지만 실질적인 문제를 해결했습니다. 툴팁이 새 데이터로 업데이트 될 때마다이 코드를 실행합니다.
$timeout(function() {
$('[data-toggle="tooltip"]').each(function(index) {
if ($(this).attr("title").length > 0) {
$( this ).attr("data-original-title", $(this).attr("title"));
}
});
$timeout(function() {
$(document).tooltip({ selector: '[data-toggle="tooltip"]'});
}, 500);
}, 1500);
본질적으로 여기서 일어나는 일은 다음과 같습니다.
- 다이제스트주기가 완료되고
titles가 업데이트 될 때까지 잠시 (1500ms) 기다 립니다.
- 가 있다면
title(즉이 변경되었습니다) 비어 있지 않은 속성의에 복사 data-original-title가 부트 스트랩의 toolips에 의해 선택 될 수 있도록 속성입니다.
- 툴팁 재 활성화
이 긴 답변이 저처럼 어려움을 겪고있는 사람에게 도움이되기를 바랍니다.