在 AngularJS 中动态创建元素后绑定指令答案

【问题标题】：Binding Directives after Dynamically Creating an Element in AngularJS在 AngularJS 中动态创建元素后绑定指令
【发布时间】：2017-06-02 11:14:30
【问题描述】：

我有一个动态创建元素的代码（x 和parentDiv）。

var x = document.createElement('myTag');
parentDiv.appendChild(x);

我有一个如下所示的指令：

.directive("myTag", function($compile) {
    return {
        restrict: "E",
        replace: true,
        template: "<span><img src='something/url/img.png'></img></span>"
    }
})

如何将 myTag 标记替换为指令中的代码？我知道使用 $compile 以便 AngularJS 之外的代码可以包含在其范围内，但我不知道该放在哪里。

【问题讨论】：

你在哪里创建这个元素？在角度上下文之外？在控制器中？在工厂里？
@FealroneAlajas，my answer 有帮助吗？
@Maximus 嗨。是的。对不起，我今天有点，但它就像一个魅力。谢谢！ :D
@FealroneAlajas，太好了，祝你好运

标签： javascript angularjs angularjs-directive

【解决方案1】：

实际上，您应该在添加元素之前使用compile：

var childScope = scope.$new();
var x = document.createElement('myTag');
var compiled = $compile(x)(childScope);
parentDiv.appendChild(compiled);

$compile 服务将获取模板：

<span><img src='something/url/img.png'></img></span>

并将其放在用x 引用的DOM 元素中。

【讨论】：