我一直在搜索互联网,并没有找到答案.我的问题很简单,我希望在我的标记中有这样的东西：
<div my-tooltip-template="'mytt.tpl.html'" my-tooltip-scope="myDataItem">Some text...</div>
编辑：其中myDataItem是一个范围变量,它包含我的数据对象,并且模板可能如下所示：
<h1>{{dataItem.title}}</h1>
<span>{{dataItem.description}}</span>
我希望使用包含myDataItem作为dataItem的范围编译该模板,并将其显示为工具提示.通过尝试使用ui-bootstrap工具提示模块我可以看出,将html注入工具提示的方法是使用指令tooltip-html-unsafe但是注入的html不会被编译,即不会评估角度表达式,指令不扩展等.
我该如何为此创建指令？我想要一个精益求精的结果,我不想要包含jQuery或任何其他库,只需要AngularJS和ui-bootstrap.
非常感谢！
以下是如何根据您的要求创建工具提示的蓝图(或使用ui-bootstrap的工具提示修改/包含此工具提示).
app.directive("myTooltipTemplate",function($compile){
var contentContainer;
return {
restrict: "A",scope: {
myTooltipScope: "="
},link: function(scope,element,attrs,ctrl,linker){
var templateUrl = attrs.myTooltipTemplate;
element.append("<div ng-include='\"" + templateUrl + "\"'></div>");
var toolTipScope = scope.$new(true);
angular.extend(toolTipScope,scope.myTooltipScope);
$compile(element.contents())(toolTipScope);
}
};
});
