AngularJs:抢编译的HTML并设置为提示 [英] AngularJs: grab compiled html and set into tooltip
问题描述
我采用了棱角分明的js引导提示上显示的一组元素的提示。
I'm using angular js bootstrap tooltip to show tooltips on a set of elements.
Plunker: http://plnkr.co/edit/9xk41f3CR0wnajN71bSi
我需要注入成角编制的提示HTML,但我真的不明白怎么样。因为它得到从范围为变量的HTML,但对于一组元素,这是不可能的工具提示教程对我来说并不有用。
I need to inject into the tooltip html compiled by angular, but i don't really get how. The tooltip tutorial is not useful to me because it gets the html from the scope as variable, but for a set of elements this is not possible.
我怎么可以填写提示-HTML不安全
?
推荐答案
您可以做这样的事情:
HTML
<li ng-repeat="phone in phones">
<div phone-info index="{{$index}}">
<p tooltip-html-unsafe="{{tooltips[$index] }}">A tooltip should appear on top of this line ({{ phone.name }} - {{ phone.snippet }})</p>
<div>
</li>
添加到控制器:
$scope.tooltips = [];
指令:
app.directive('phoneInfo', function($compile, $timeout) {
/* wrap in root element so we can get final innerHTML*/
var tipTemplate = '<div><p> This will be the content of {{phone.name}} injected in the tooltip </p><div>';
return {
link: function(scope, el, attrs) {
var tipComp = $compile(tipTemplate)(scope)
$timeout(function() {
scope.tooltips[attrs.index] = tipComp.html()
});
}
}
})
用于首页
来避免创建一个孤立的范围。也可以用孤立的范围进行,并创建手机的属性
而不是使用 scope.tooltips [指数]
Used index
to avoid creating an isolated scope. Can also be done with isolated scope and create a property of phone
instead of using scope.tooltips[index]
<大骨节病> 演示 大骨节病>
这篇关于AngularJs:抢编译的HTML并设置为提示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!