如何创建一个模板编译一个AngularJS提示指令？ [英] How do I create an AngularJS tooltip directive with a compiled template?

问题描述

我在网上搜索漫长而艰苦，没有发现直接的答案。我的问题很简单，我想在我的标记是这样的：

I've searched the internet long and hard and found no straight answer. My question is simple, I want to have something like this in my markup:

<div my-tooltip-template="'mytt.tpl.html'" my-tooltip-scope="myDataItem">Some text...</div>

编辑：其中， myDataItem 是一个包含我的数据对象的范围变化，并用模板，可能看起来像：

Where myDataItem is a scope variable which contains my data object, and with a template which might look like:

<h1>{{dataItem.title}}</h1>
<span>{{dataItem.description}}</span>

和我想有一个模板，它包含了一个范围 myDataItem 为的DataItem 编译并显示为提示。至于我可以用实验UI的引导 提示模块，注入HTML插入到工具提示的方式就是告诉通过使用指令提示-HTML不安全，但注入的HTML不被编译，也就是说，前角pressions不评估，指令不展开，等

And I want to have that template compiled with the a scope which contains myDataItem as dataItem and displayed as a tooltip. As far as I could tell by experimenting with ui-bootstrap tooltip module, the way to inject html into a tooltip is by using the directive tooltip-html-unsafe but the html injected doesn't get compiled, i.e., angular expressions are not evaluated, directives are not expanded, etc.

我如何去创造这个指令？我想一个精干的结果，我不希望有包括jQuery的或任何其他库，只是AngularJS和UI自举。

How do I go about creating a directive for this? I want a lean result, I don't want to have to include jQuery or any other library, just AngularJS and ui-bootstrap.

非常感谢！

推荐答案

Here're如何，你可以根据你的要求创建一个提示（或修改/这与UI的自举的提示encorporate）的蓝图。

Here're the blueprints of how you could create a tooltip according to your requirements (or modify/encorporate this with ui-bootstrap's tooltip).

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

});

这，当然，没有任何实际的提示功能，如弹出，安置，等等 - 它只是追加编译模板到任何元素，这个指令适用于

This, of course, doesn't have any of the actual tooltip functionality, like popup, placement, etc... - it just appends the compiled template to whatever the element that this directive applies to.

Plunker

plunker ，提供近到提示的行​​为;

Changed plunker with closer-to-tooltip behavior;

这篇关于如何创建一个模板编译一个AngularJS提示指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！