Question

我是一名Angular noob，正在处理包含工具提示的应用。最初，这些只是包含文本。现在我们希望这些包括链接，图像等（换句话说，HTML标记）。这个想法是一个元素可以有两个工具提示，并且HTML会在一段时间后显示出来。

我把一个快速而肮脏的例子（FIDDLE）放在一起来说明当前的结构。这是指令：

app.directive('myTooltip', ['$timeout', function($timeout) {    
    return {
        restrict: 'A',
        link: function($scope, $element, $attr) {
            var tooltip;
            var richTooltip;
            var DELAY = 1200;
            var showTooltip = function() { 
                tooltip.style.visibility = 'visible'; 
                $timeout(showRichTooltip, DELAY);
            }
            var showRichTooltip = function() { 
                richTooltip.style.visibility = 'visible'; 
            }
            var hideTooltip = function() { 
                tooltip.style.visibility = 'hidden'; 
                $timeout(hideRichTooltip, DELAY);
            }     
            var hideRichTooltip = function() { 
                richTooltip.style.visibility = 'hidden'; 
            }
            var initTooltips = function() {
                tooltip = document.createElement('div');
                tooltip.innerHTML = $attr.myTooltip;
                tooltip.className = 'tooltip';
                tooltip.style.visibility = 'hidden';
                document.body.appendChild(tooltip);       
                $element.on('mouseenter', showTooltip);
                $element.on('mouseleave', hideTooltip);

                richTooltip = document.createElement('div');
                richTooltip.innerHTML = $attr.myRichTooltip;
                richTooltip.className = 'rich-tooltip';
                richTooltip.style.visibility = 'hidden';
                document.body.appendChild(richTooltip);       

            } 
            initTooltips();
        }
    };
}]);

标记的使用方式如下：

<button my-tooltip="Text only tooltip" my-rich-tooltip="This is a tooltip with <a href='#'>HTML</a>!">Button</button>

现在这可以作为一个例子，但它看起来不太好。因此，我的问题是如何以更好的方式做到这一点，而不必将工具提示HTML作为属性传递！例如，传递包含HTML的URL会很好。

Answer 1

首先，您可以使用所有 jqLite 功能，例如angular.element($element).css(...)和链接（https://docs.angularjs.org/api/ng/function/angular.element）

例如：

angular.element(tooltip).css("display", "none").addClass("tooltip");

要使用网址而不是直接传递此内容，您可以使用$templateCache（https://docs.angularjs.org/api/ng/service/ $ templateCache），$http在必要时加载模板并使用{{1}将范围应用于加载的html。

小例子：

$compile

始终隔离指令范围，如果可能，由于性能原因。（否则它将继承完整的父范围，这可能会受到伤害）

如果你不使用app.directive('myTooltip', function($templateCache, $compile, $http) { return { restrict: 'A', scope: { myRichTooltip: "@" //template URL as string } link: function($scope, $element, $attr) { //Because the template cache will load the html via xhr, this will be async -> promise $http.get($scope.myRichTooltip, {cache: $templateCache}).then(function(toolTipString){ var template = angular.element(toolTipString); //By doing this, you can even use scope expressions in your external toolTipString $compile(template.contents())(scope); // [...] Now you got the compiled html element // use it as you like. //angular.element("body").append(template); //angular.element(template).css("top", "100px").css("left", "100px); }); } } });这个例子在外部html文件中不起作用：

$compile

但是<span>{{1+1}}</span>会有。

将HTML转换为指令

1 个答案: