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注入工具提示的方法是使用指令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;

Answer 3

我发现这个问题在AngularJS，jQuery（和其他库）中免费搜索经典的工具提示实现。

如果有人正在搜索一个指令，我已经构建了以下指令：

app.directive('tooltip', function($sce, $compile) {
    return {
        restrict: 'A',
        scope: {
            content: '=tooltipContent'
        },
        link: function(scope, element, attributes) {

            /* Attributes */

            scope.displayTooltip = false;

            /* Methods */

            scope.updateTooltipPosition = function(top, left) {
                tooltip.css({
                    top: top + 'px',
                    left: left + 'px',
                });
            };

            scope.getSafeContent = function(content) {
                return $sce.trustAsHtml(content);
            };

            /* Bootstrap */

            var tooltip = angular.element(
                '<div ng-show="displayTooltip" class="tooltip">\
                    <span ng-bind-html="getSafeContent(content)"></span>\
                </div>'
            );

            angular.element(document.querySelector('body')).append(tooltip);

            /* Bindings */

            element.on('mouseenter', function(event) {
                scope.displayTooltip = true;
                scope.$digest();
            });

            element.on('mousemove', function(event) {
                scope.updateTooltipPosition(event.clientY + 15, event.clientX + 15);
            });

            element.on('mouseleave', function() {
                scope.displayTooltip = false;
                scope.$digest();
            });

            /* Compile */

            $compile(tooltip)(scope);
        }
    };
});

您可以在此处进行测试：http://jsfiddle.net/m4sr9jmn/2/

希望它会有所帮助！

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

3 个答案: