创建指令，在使用它的地方之外插入HTML

Create Directive that Inserts HTML Outside of Where it's Used

本文关键字：方之外 插入 HTML 指令 创建      更新时间：2023-09-26

我已经创建了一个AngularJS指令。这个指令需要插入一个HTML元素作为body元素的子元素。这个元素需要包含另一个自定义组件，定义为一个指令。

我试过transclude指令，这是不允许我达到预期的结果;将元素作为body的直接子元素。我正在考虑的一种方法是，以某种方式从templateUrl中抓取标记，并在关闭body标记之前将"倾斜地"注入DOM。

我真的试着对每天使用AngularJS的概念保持开放的态度，这些"东西"让这变得很困难。

在指令的link函数中，尝试以下操作:

link: function(scope, element, attrs) {
    // The template of the widget to be added elsewhere.
    // This is different than your directive's own template.
    var tpl = '<div>some body widget</div>';
    // Compile your template, defining a custom cloneAttachFn
    // to attach the element where you want in the DOM.
    var appended = $compile(tpl)(scope, function(clonedElement) {
       $('body').append(clonedElement);
    });
}

这样做的好处是，你附加的模板被编译为与它的"兄弟"指令相同的作用域。你可以在$scope上设置触发消化循环的属性;从附加的模板访问控制器中定义的作用域方法;以及你期望能够做的所有其他正常指令的事情。

尽管拉伸，这仍然感觉像Angular的方式。也许我错过了什么，但这种方法似乎对我有效。

还-确保将$compile注入到您的指令中，并确保在作用域销毁时执行清理:

scope.$on('$destroy', function() {
    appended.remove();
});

Docs here: https://docs.angularjs.org/api/ng/service/$compile

相关文章：