Angularjs 在正文中包含嵌入的渲染指令

Question

我想创建一个带有 transclude 的 tooltip 属性指令，并将其呈现在 body 上..

例如：

<div tooltip>
    <transcluded-content>content</transcluded-content>
</div>

module.directive('tooltip', function () {
    return {
            restrict: 'A',
            templateUrl: 'tooltip.html',
            transclude: {
                'transcluded-content': 'transcluded-content'
            }
        };
    });

我想在正文而不是 div...

上呈现模板

Answer 1

为了将元素放在主体上，您可以尝试在 link 函数中移动它。这个怎么样？

module.directive('tooltip', function () {
    return {
            restrict: 'A',
            templateUrl: 'tooltip.html',
            transclude: {
                'transcluded-content': 'transcluded-content'
            },
            link: function (scope, element) {
                angular.element('body').append(element);
            }
        };
    });

还有更复杂的方法，但它们需要 $compile-ing 和其他复杂的技术。