angularjs - 如何使用已编译的模板创建 AngularJS 工具提示指令？

Question

我在互联网上搜索了很长时间，但没有找到直接的答案。我的问题很简单，我想在我的标记中有这样的东西:

<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 tooltip模块，将 html 注入(inject)工具提示的方法是使用指令 tooltip-html-unsafe但是注入(inject)的 html 没有被编译，即不评估 Angular 表达式，不扩展指令等。

我该如何为此创建指令？我想要一个精益的结果，我不想包含 jQuery 或任何其他库，只包含 AngularJS 和 ui-bootstrap。

非常感谢!

Answer 1

这是如何根据您的要求创建工具提示的蓝图(或使用 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);
    }
  };

});

当然，这没有任何实际的工具提示功能，如弹出、放置等... - 它只是将编译后的模板附加到该指令适用的任何元素。

Plunker

已更改 plunker具有更接近工具提示的行为；