Javascript 如何将angularjs ui引导工具提示动态添加到现有标记？

对angularjs来说比较新。帮我了解这里发生了什么

我最终要做的是：给定html中的一块文本（比如在段落元素中），我想动态地向文本中的选定单词添加工具提示（确切地说是引导工具提示）。因此，例如，如果用户在搜索框中键入世界“hello”，则当鼠标悬停在上面时，段落中所有“hello”实例都将显示工具提示，显示一些消息，如定义或其他内容

注意：我不认为我一开始就清楚这一点，但我想添加工具提示的文本块已经在html中，并且不会有任何类型的指令标记围绕它。请参阅我的示例

我已经在jQuery中完成了这项工作……现在我正试图让它在angularjs中工作

我的第一次尝试是使用一个带有正则表达式的自定义过滤器，它将在段落的适当位置插入一个带有工具提示属性的“a”标记。新的标记出现了，但angularjs似乎没有“看到”（还不太确定术语，但我认为它没有“绑定”？）

下面是在JSFIDLE上演示的问题：

（1） 输出中的第一行有一个关于“foo”的工作工具提示……它只是直接在标记中有工具提示属性。生成的html：

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

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

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

（2） 第二行使用ng bind html，并具有属性，但没有可用的工具提示。生成的html：

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

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

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

（3） 第三行使用过滤器，并具有属性，但没有可用的工具提示。生成的html：

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

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

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

我的主要问题是…如何解决我上面描述的任务

第二个问题是关于理解上面3个例子中的每一个都发生了什么。我注意到（1）中的直接输出在生成的标记中有一个由angular插入的“ng scope”类。另外两个没有，但是在父p标记中插入了一个ng绑定类。我不确定这里发生了什么，但我认为这与我的问题有关

我感觉解决方案可能涉及一个指令，但我不确定如何将该指令应用于现有文本（即，标记中已有的p标记）

谢谢

编辑：更新JSFIDLE以更准确地反映问题（输出中的第四行）

编辑：

我想我误解了你的要求。特别是在注意到您已经在使用ui boostrap angular module之后

我认为，这里的问题是，您附加的新属性不是由Angular编译的，因此，

tooltip

指令永远不会运行。您需要通过$compile（element）（scope）运行新附加的HTML/DOM

指示示例。请注意，这是不完整的，将其更多地视为伪代码，而不是其他任何东西，但它应该作为如何执行的指南。基本上，您可以在指令内部使用任何jQuery，需要注意的重要一点是，在link函数中得到的“elem”与指令绑定到的元素相同。此外，您需要在自己创建并附加的任何HTML/DOM上调用$compile（您的_元素）（scope）

<p tooltip-tag="the_tag" text="My tooltip text">This is my tooltip the_tag test</p> 


myApp.directive('tooltipTag', ['$compile', function($compile) {
    return {
        scope: {
            text: '@' // Create isolate scope as this is a reusable component, we don't want to clutter parent scope
        },
        link: function(scope, elem, attrs) {
            // Elem is here the <p> element, as jqLite/jQuery element.
            // Put whatever logic you want here, feel free to use jQuery if you want
            // I guess you want to copy out the text, search for 'the_tag' (which you can find in 'attrs.tooltipTag') in the text inside the <p></p> and then replace the content.
            // Replace content elem.                
            elem.html(replaced_html);  // Contains text with the_tag replaced with <a href="whatever" tooltip="{{text}}" etc..>the_tag</a>
            var to_compile = elem.children('a');
            // Finally, compile and attach to scope with
            $compile(to_compile)(scope);
        }

    }

}])

这是我的工具提示测试
myApp.directive（'tooltipTag'，['$compile'，function（$compile）{
返回{
范围：{
text:'@'//创建隔离作用域因为这是一个可重用的组件，我们不想使父作用域混乱
},
链接：功能（范围、要素、属性）{
//Elem在这里是元素，作为jqLite/jQuery元素。
//把你想要的任何逻辑放在这里，如果你想的话，可以随意使用jQuery
//我猜您想复制文本，在
内的文本中搜索“the_tag”（可以在“attrs.tooltipTag”中找到），然后替换内容。
//替换内容元素。
elem.html（替换为_html）；//包含替换为_标记的文本
var to_compile=elem.children（'a'）；
//最后，使用
$compile（to_compile）（范围）；
}
}
}])

这可能是一种幼稚的方法，但我并不完全了解您的需求。但它应该给你一个解决这个问题的可能方法

---

我认为你处理这个问题的方法不对。使用angular时有一个通用规则，即：如果要修改DOM，则（几乎总是）需要一个指令

那么，这里出了什么问题？ 我不太熟悉Bootstrap的工具提示实现，但我认为它永远不会获取新添加的“工具提示”属性。我相信它在第一个示例中起作用的原因是与工具提示相关的代码在加载页面时在DOM中搜索工具提示属性，但是在加载之后添加它是不可能的（如果我错了，请纠正我）

那么，你如何解决这个问题呢？ 我相信您希望以某种方式动态添加工具提示？我认为angular ui引导已经有了支持这一点的指令，例如，

ui工具提示=“{{variable.on.scope}}”

。请参阅下面的链接

或者，如果您需要其他东西，您必须创建自己的指令。指令一开始可能很吓人，但在我看来，它们是Angular最重要的特性，一旦掌握了窍门，就很容易使用

基本上，创建新指令时，可以传入定义工具提示中所需文本的数据。在指令中的link（scope、elem、attrs）函数中，可以将工具提示（使用引导程序的elem.tooltip（）函数）附加到指令所应用的元素“elem”

---

如果需要附加

处理
HTML
的正确方法是角度指令，那么让我们制作一个包含两个参数的指令（比如
动态工具提示
）


工具提示信息
你的搜索词
<