¿Cómo agregar información sobre herramientas bootstrap de angularjs ui dinámicamente al marcado existente?
Relativamente nuevo para angularjs. ¡Ayúdame a entender lo que está pasando aquí!
Lo que estoy tratando de lograr en última instancia: dado un bloque de texto en mi html (por ejemplo, en un elemento de párrafo), quiero agregar dinámicamente información sobre herramientas (bootstrap tooltips) para palabras seleccionadas en el texto. Entonces, por ejemplo, si un usuario escribe el mundo "hola" en un cuadro de búsqueda, todas las instancias de "hola" en el párrafo mostrarán una información sobre herramientas cuando se desplace el mouse, mostrando algún mensaje como una definición o algo así.
NOTA: No creo que haya sido claro al principio, pero el bloque de texto al que quiero agregar la información sobre herramientas ya está en el html y no tendrá ningún tipo de marcado de etiqueta directiva alrededor. Mira miviolín para una ilustración.
He hecho esto en jQuery ... ¡ahora estoy tratando de que funcione en angularjs!
Mi primer intento fue usar un filtro personalizado con una expresión regular que inserte una etiqueta "a" con los atributos de información sobre herramientas en el párrafo en las ubicaciones apropiadas. El nuevo marcado aparece, pero no parece ser "visto" por angularjs (no estoy seguro de la terminología todavía, pero creo que no está "enlazado").
Aquí está el problema ilustrado en jsfiddle:
http://jsfiddle.net/petersg5/pF33a/2/
(1) La primera línea en la salida tiene una información sobre herramientas que funciona en "foo" ... solo tiene los atributos de la información sobre herramientas directamente en el marcado. HTML generado:
<a href="#" tooltip-placement="top" tooltip="basic tooltip" class="ng-scope">foo</a>
(2) La segunda línea utiliza ng-bind-html y tiene los atributos, pero no una información sobre herramientas que funcione. HTML generado:
<a href="#" tooltip-placement="top" tooltip="tooltip via ng-bind-html">foo</a>
(3) La tercera línea usa el filtro y tiene los atributos, pero no una información sobre herramientas que funcione. HTML generado:
<a href="#" tooltip-placement="top" tooltip="tooltip via filter">foo</a>
Mi pregunta principal es ... ¿cómo resolver la tarea que describí anteriormente?
La pregunta secundaria es sobre la comprensión de lo que está pasando en cada uno de los 3 ejemplos anteriores. Noté que la salida directa en (1) tiene una clase "ng-scope" insertada por angular en el marcado generado. Los otros dos carecen de esto, pero tienen una clase de enlace ng insertada en la etiqueta p principal. No estoy seguro de lo que está pasando aquí, pero creo que tiene algo que ver con mi problema.
Tengo la sensación de que la solución puede implicar una directiva, pero no estoy seguro de cómo aplicaría esa directiva al texto existente (es decir, una etiqueta p ya en el marcado).
¡Gracias!
EDIT: actualizó el jsfiddle para reflejar con mayor precisión el problema (cuarta línea en la salida)