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

一尘不染

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

angularjs

我经过漫长而艰苦的互联网搜索，没有找到直接的答案。我的问题很简单，我想在标记中添加以下内容：

<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注入工具提示的方法是使用指令，tooltip-html- unsafe但是注入的html不会被编译，即，不对角表达式求值，不对指令进行扩展等。

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

非常感谢！

阅读 270

2020-07-04

共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);
    }
  };

});

当然，它没有任何实际的工具提示功能，例如弹出窗口，放置等…-它只是将已编译的模板附加到此指令适用的任何元素上。

柱塞

更换了具有更接近工具提示行为的弹头；

2020-07-04