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

发布时间：2020-12-17 07:53:10 所属栏目：安全来源：网络整理

导读：我一直在搜索互联网,并没有找到答案.我的问题很简单,我希望在我的标记中有这样的东西： div my-tooltip-template="'mytt.tpl.html'" my-tooltip-scope="myDataItem"Some text.../div 编辑：其中myDataItem是一个范围变量,它包含我的数据对象,并且模板可能如

我一直在搜索互联网,并没有找到答案.我的问题很简单,我希望在我的标记中有这样的东西：

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

});

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

Plunker

用更接近工具提示的行为改变了plunker;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!