AngularJs指令，用于附加和删除DOM元素，并带有函数。

Question

我正在尝试创建一个指令来添加新的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();
                }
            });
        }
    }
}

如果我点击插入新的元素按钮，它会起作用。如果我按下esc键，则元素将被删除。但是，如果我按下关闭元素的按钮，该按钮具有"ng-click="removeEl()"，则没有任何反应。

我该如何解决这个问题？

- celsomtrindade

---

你不需要使用 document.getElementById("lightBox")。你应该使用 element.find('#lightBox')，因为它在指令元素内部。另外，你的 ng-click 前面有一个引号吗？如果是这样，那就是问题所在。 - Chris Stanley

甚至更好：scope.removeEl = function() { ngEl.remove(); }就足够了。 - dfsq

@ChrisStanley 关于 ngClick，这是个打字错误。关于 getElementById，我使用它是因为我正在将其附加到 body 上，但是忘记了它。谢谢你提醒我。 - celsomtrindade

@ChrisStanley @dfsq 实际上，它们都不起作用。ngEl.remove() 返回以下错误：在 Angular 表达式中引用 DOM 节点是不允许的！而 element.find 则返回一个空对象。 - celsomtrindade

这真的很奇怪。我想如果没有HTML，我就无法弄清楚了。抱歉！ - Chris Stanley

@ChrisStanley 我在这里做了一个 Plunkr：https://plnkr.co/edit/WLrnni?p=preview 但请记住，主要问题已经解决，这只是为了简化代码。 - celsomtrindade

Answer 1

您从未编译过HTML元素，因此ng-click属性对Angular没有任何意义。

您应该这样做：

scope.insertEl = function() {
  element.append(ngEl);
  $compile(ngEl)(scope);
}

为此，请记得将$compile注入到指令中：

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

- dfsq

---

好的，它起作用了。但是如果我再试图打开它，它就不起作用了。你知道为什么吗？ - celsomtrindade

你是如何尝试打开它的？ - dfsq

不用在意，这是因为我在模板上也设置了指令。我从那里删除了它，现在它可以正常工作了。太好了！$compile 的真正作用是什么？您介意解释一下，这样我就可以更多地了解它了吗？ - celsomtrindade

$compile 服务从 HTML 创建链接函数，然后将此链接函数连接到作用域对象。简单地说，ng-click 在 Angular 解析模板并应用 ngClick 指令（执行它，调用）之前没有任何意义。然后 ngClick 设置 onclick 事件。 - dfsq