Javascript AngularJs指令，用于使用函数附加和删除DOM元素

我试图创建一个

指令

，将一个新的

html元素

附加到

DOM

，并将其删除

追加和删除的逻辑已经在运行，除了在单击按钮时删除

元素

。现在我只能在按下

esc

键时将其删除。我这里有一条指令：

function scLight() {
    return {
        restrict: 'A',
        link: function(scope, element) {
            var myEl = '<div sc-light id="lightBox" class="debugModal"><h1>Tests</h1><button ng-click="removeEl()">Close</button></div>',
                ngEl = angular.element(myEl);

            scope.insertEl = function() {
                // angular.element(document.body).append(ngEl); //Append to body
                element.append(ngEl); //Append to element
            }

            scope.removeEl = function() {
                var lightBoxEl = document.getElementById("lightBox"),
                    ngLightBoxEl = angular.element(lightBoxEl);
                ngLightBoxEl.remove();
            }

            document.addEventListener("keyup", function(event) {
                if(event.which == 27) {
                    return scope.removeEl();
                }
            });
        }
    }
}

函数scLight（）{
返回{
限制：“A”，
链接：功能（范围、元素）{
var myEl='TestsClose'，
ngEl=角元素（myEl）；
scope.insertEl=函数（）{
//angular.element（document.body）.append（ngEl）；//append to body
element.append（ngEl）；//追加到元素
}
scope.removeEl=函数（）{
var lightBoxEl=document.getElementById（“lightBox”），
ngLightBoxEl=角度元素（lightBoxEl）；
ngLightBoxEl.remove（）；
}
文件。添加事件列表器（“键控”，功能（事件）{
if（event.which==27）{
返回scope.removeEl（）；
}
});
}
}
}

如果我单击按钮插入新的

元素

，它会工作。如果我按下

esc

，则

元素将被删除。但是如果我按下按钮关闭元素，它有这个
“ng click=“removeEl（）”
，什么也不会发生

如何解决这个问题？
您从未编译过HTML元素，所以ng click属性对Angular来说没有任何意义

您应该这样做：

scope.insertEl=function（）{
元素追加（ngEl）；
$compile（ngEl）（范围）；
}

为此，请记住将
$compile
注入指令：

function scLight($compile) { /* ... */ }

好吧，它起作用了。但是如果我再次尝试打开它，它就不起作用了。你知道为什么吗？你是如何尝试打开它的？不要紧，这是因为我在模板上也隐藏了指令集。我从那里删除了它，现在它起作用了。太好了！这里$compile的真正工作是什么？你介意解释一下吗？这样我就可以了解更多关于这个的信息？服务创建了链接从HTML调用函数，然后这个链接函数连接到范围对象。简单地说，在Angular解析模板并应用ngClick指令（执行它，调用）之前，ng click没有任何意义。然后ngClick设置onclick事件。您不需要
document.getElementById（“lightBox”）
。您应该使用
元素。查找（“#lightBox”）
，因为它在directive元素中。另外，在ng click之前是否有一个“前面”？因为如果你这样做，那就是问题所在。。。。或者更好：
scope.removeEl=function（）{ngEl.remove（）；}
就足够了。@ChrisStanley关于ngClick否，这是一个打字错误。关于getElementById，我之所以使用它，是因为我将它附加到了主体上，但却忘记了它。谢谢你提醒我。@ChrisStanley@dfsq事实上，它们都没有工作
ngEl.remove（）
返回此错误：
不允许在角度表达式中引用DOM节点
和
元素.find
返回一个空对象。这真奇怪。我想如果没有html，我就无法理解它。很抱歉