如何使用编译模板创建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>

我希望使用包含myDataItemas dataItem并显示为工具提示的范围编译该模板.通过试验ui-bootstrap tooltip模块可以告诉我,将html注入工具提示的方法是使用指令,tooltip-html-unsafe但注入的html不会被编译,即不评估角度表达式,不扩展指令等.

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

非常感谢!

Answer 1

我能够复制并覆盖tooltip-html-unsafe的指令

angular.module( 'ui.bootstrap.tooltip')
.directive( 'tooltipSpecialPopup', function () {
    return {
     restrict: 'EA',
     replace: true,
     scope: { content: '@', placement: '@', animation: '&', isOpen: '&' },
     templateUrl: 'tooltip.tpl.html'
  };
})

.directive( 'tooltipSpecial', [ '$tooltip', function ( $tooltip ) {
     return $tooltip( 'tooltipSpecial', 'tooltip', 'mouseenter' );
 }]);

我刚刚在指令名称中将unsafe位更改为special并更改了模板.

这是一个Plunker

Answer 2

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