Relativ neu für Angularjs. Hilf mir zu verstehen, was hier los ist!

Was ich letztendlich erreichen möchte: Bei einem bestimmten Textblock in meinem HTML-Code (z. B. in einem Absatzelement) möchte ich ausgewählten Wörtern dynamisch QuickInfos (um genau zu sein Bootstrap-QuickInfos) hinzufügen. Wenn ein Benutzer beispielsweise die Welt "Hallo" in ein Suchfeld eingibt, wird in allen Fällen von "Hallo" im Absatz ein Tooltip angezeigt, wenn er den Mauszeiger darüber hält und eine Nachricht wie eine Definition oder etwas anderes anzeigt.

ANMERKUNG: Ich glaube nicht, dass mir dies anfangs klar war, aber der Textblock, zu dem ich die QuickInfo hinzufügen möchte, befindet sich bereits in HTML und wird von keinerlei Direktiven-Tag-Markierungen umgeben sein. Sieh meinGeige zur Veranschaulichung.

Ich habe dies in jQuery getan ... jetzt versuche ich, es in anglejs zum Laufen zu bringen!

Mein erster Versuch war, einen benutzerdefinierten Filter mit einem regulären Ausdruck zu verwenden, bei dem an den entsprechenden Stellen ein "a" -Tag mit den QuickInfo-Attributen in den Absatz eingefügt wird. Das neue Markup wird angezeigt, scheint aber von anglejs nicht "gesehen" zu werden (die Terminologie ist noch nicht ganz sicher, aber ich denke, es wird nicht "gebunden" ??).

Hier ist das auf jsfiddle dargestellte Problem:

http://jsfiddle.net/petersg5/pF33a/2/

(1) Die erste Zeile in der Ausgabe enthält einen funktionierenden Tooltip für "foo". Sie enthält nur die Tooltip-Attribute direkt im Markup. Generiertes HTML:

<a href="#" tooltip-placement="top" tooltip="basic tooltip" class="ng-scope">foo</a>

(2) Die zweite Zeile verwendet ng-bind-html und hat die Attribute, aber keinen funktionierenden Tooltip. Generiertes HTML:

<a href="#" tooltip-placement="top" tooltip="tooltip via ng-bind-html">foo</a>

(3) Die dritte Zeile verwendet den Filter und enthält die Attribute, jedoch keinen funktionierenden Tooltip. Generiertes HTML:

<a href="#" tooltip-placement="top" tooltip="tooltip via filter">foo</a>

Meine Hauptfrage ist ... wie löse ich die oben beschriebene Aufgabe?

Bei der zweiten Frage geht es darum, zu verstehen, was in den drei obigen Beispielen vor sich geht. Mir ist aufgefallen, dass die direkte Ausgabe in (1) eine "ng-scope" -Klasse hat, die von angle in das generierte Markup eingefügt wird. Den beiden anderen fehlt dies, aber im übergeordneten p-Tag ist eine ng-Bindungsklasse eingefügt. Ich bin mir nicht sicher, was hier los ist, aber ich denke, es hat etwas mit meinem Problem zu tun.

Ich habe das Gefühl, die Lösung könnte eine Direktive beinhalten, aber ich bin nicht sicher, wie ich diese Direktive auf vorhandenen Text anwenden würde (d. H. Ein p-Tag, das sich bereits im Markup befindet).

Vielen Dank!

EDIT: Die jsfiddle wurde aktualisiert, um das Problem genauer darzustellen (vierte Zeile in der Ausgabe)