如何动态地添加angularjs UI引导提示，以现有的标记？ [英] How to add angularjs ui bootstrap tooltips dynamically to existing markup?
问题描述
相对较新的angularjs。帮我理解这是怎么回事就在这里！
什么我最终想要完成：鉴于我的HTML文本块（发言权段落元素），我要动态添加工具提示（提示的引导要准确），以选择的单词在文本中。因此，例如，如果用户键入的世界你好到一个搜索框，在所有情况下，你好的段落时，上空盘旋，显示像一个定义或一些东西消息将显示工具提示。
请注意：我不认为我是清楚这个最初，但文本块，我想添加的工具提示已经在HTML，不会有什么样的指令标签加价周边它。看到我的小提琴一个例证。
我在jQuery的做到了这一点......现在我试图让它在angularjs工作！
我的第一次尝试是使用自定义过滤器与工具提示属性，进入在适当位置的段落，将插入一个A标签的正则表达式。新的标记出现，但似乎并不被angularjs被看到（不太清楚的术语，但是我认为这是没有得到必然？）。
下面是对的jsfiddle说明的问题：
http://jsfiddle.net/petersg5/pF33a/2/
（1）在输出的第一行有福工作提示...它只是工具提示中直接标记属性。生成的HTML：
＆LT; A HREF =＃提示贴装=顶工具提示=基本工具提示级=NG-范围＆GT;富＆LT; / A＆GT;
（2）第二行使用纳克绑定-HTML，和具有属性，但不是工作工具提示。生成的HTML：
＆LT; A HREF =＃提示贴装=顶提示=提示通过NG-绑定-HTML＆GT;富＆LT; / A＆GT;
（3）第三行使用滤波器，并且具有的属性，而不是一个工作工具提示。生成的HTML：
＆LT; A HREF =＃提示贴装=顶工具提示=通过过滤提示＆GT;富＆LT; / A＆GT;
我的主要问题是......怎么解决我上面描述的任务是什么？
次要的问题是关于理解发生了什么事情在上面的每个3个例子。我注意到，在直接输出（1）具有角在生成的标记插入一个NG-范围级。另外两个缺乏这一点，但确实有插入父p标签的NG-绑定类。不知道是怎么回事，但我认为这是与我的问题。
我有一种感觉的解决方案可能涉及的指令，但我不知道我会如何应用该指令现有文本（即p标签已经在标记）。
谢谢！
编辑：更新的jsfiddle更准确地反映这个问题（在输出第四行）
要处理的正确方法 HTML 将角度指令，让做一个指令（比如动态提示）取两个参数
- 工具提示信息
- 您的搜索词
在 HTML
＆LT; p动态提示=我的信息提示元=searchElement＆GT;
你好世界看看我吧foo的应用
＆所述; / P＆GT;
的 searchElement 将与任何模型绑定像
＆LT;输入类型=搜索NG-模式=搜索＆GT;
＆LT;输入类型=按钮值=搜索NG-点击=searchElement =搜索＆GT;
在这里，当你点击搜索按钮，在搜索框中输入的值将在 searchElement
该指令定义是：
app.directive（'dynamicTooltip'，函数（$编译）{
返回{
限制：'A'，
范围： {
tooltipElement：'='，
dynamicTooltip：'@'
}，
链接：功能（范围，元素，ATTRS）{
变种模板='＆下; A HREF =＃提示贴装=顶部提示='+ scope.dynamicTooltip +＆GT; {{tooltipElement}}＆下; / A＆GT;';
范围。$腕表（'tooltipElement'，功能（价值）{
VAR previousTooltip = element.find（'A'）;
angular.forEach（previousTooltip，功能（项目一）{
VAR EL = angular.element（项目）;
el.replaceWith（el.text（））;
}）;
VAR SEARCHTEXT = scope.tooltipElement;
如果（SEARCHTEXT）{
。更换= element.html（）替代（新的RegExp（SEARCHTEXT，G），模板）;
element.html（替换）;
}
$编译（element.contents（））（范围）;
}）;
}
}
}）
该指令 $观看 提示元素，所以当你改变数值，首先它尝试删除previous提示然后尝试匹配你的搜索词若发现任何然后创建工具提示。
检查<大骨节病> 演示
Relatively new to angularjs. Help me understand what's going on here!
What I'm ultimately trying to accomplish: Given a block of text in my html (say in a paragraph element), I want to dynamically add tooltips (bootstrap tooltips to be exact) to selected words in the text. So for example if a user types the world "hello" into a search box, all instances of "hello" in the paragraph will display a tooltip when hovered over, displaying some message like a definition or something.
NOTE: I don't think I was clear on this initially, but the block of text to which I want to add the tooltip is already in the html, and will not have any kind of directive-tag mark-up surrounding it. See my fiddle for an illustration.
I've done this in jQuery...now I'm trying to get it to work in angularjs!
My first attempt was to use a custom filter with a regex which will insert an "a" tag with the tooltip attributes into the paragraph at the appropriate locations. The new markup shows up, but doesn't seem to be "seen" by angularjs (not quite sure of the terminology yet but I think it's not getting "bound"??).
Here's the problem on illustrated on jsfiddle:
http://jsfiddle.net/petersg5/pF33a/2/
(1) The first line in the output has a working tooltip on "foo"...it just has the tooltip attributes directly in markup. Generated html:
<a href="#" tooltip-placement="top" tooltip="basic tooltip" class="ng-scope">foo</a>
(2) The second line uses ng-bind-html, and has the attributes, but not a working tooltip. Generated html:
<a href="#" tooltip-placement="top" tooltip="tooltip via ng-bind-html">foo</a>
(3) The third line uses the filter, and has the attributes, but not a working tooltip. Generated html:
<a href="#" tooltip-placement="top" tooltip="tooltip via filter">foo</a>
My main question is...how to solve the task I described above?
Secondary question is about understanding what's going on in each of the 3 examples above. I noticed that the direct output in (1) has an "ng-scope" class inserted by angular in the generated markup. The other two lack this, but do have an ng-binding class inserted in the parent p tag. Not sure what's going on here but I think it has something to do with my problem.
I have a feeling the solution may involve a directive, but I'm not sure how I would apply that directive to existing text (i.e., a p tag already in the markup).
Thanks!
EDIT: updated the jsfiddle to more accurately reflect the problem (fourth line in output)
The proper way to handle HTML would be angular directive, lets make a directive (say dynamic-tooltip) that takes two parameter
- tool-tip message
- your search word
In HTML
<p dynamic-tooltip="my message" tooltip-element="searchElement">
Hello World check out my foo bar app
</p>
The searchElement will be bind with any model like
<input type="search" ng-model="search">
<input type="button" value="Search" ng-click="searchElement = search">
Here when you click search button, the value you typed in search box will be set in searchElement
The directive definition is:
app.directive('dynamicTooltip', function($compile) {
return {
restrict: 'A',
scope: {
tooltipElement: '=',
dynamicTooltip: '@'
},
link: function(scope, element, attrs) {
var template = '<a href="#" tooltip-placement="top" tooltip="' + scope.dynamicTooltip + '">{{tooltipElement}}</a>';
scope.$watch('tooltipElement', function(value) {
var previousTooltip = element.find('a');
angular.forEach(previousTooltip, function(item, i) {
var el = angular.element(item);
el.replaceWith(el.text());
});
var searchText = scope.tooltipElement;
if (searchText) {
replaced = element.html().replace(new RegExp(searchText, "g"), template);
element.html(replaced);
}
$compile(element.contents())(scope);
});
}
}
})
The directive $watch tooltip-element, so when you change the value, first it try to remove previous tooltips then it try to match your search-word if found any then create the tooltip.
Check the Demo
这篇关于如何动态地添加angularjs UI引导提示，以现有的标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
