javascript - 使用函数附加和删除 DOM 元素的 AngularJs 指令

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()" 的元素，则什么也不会发生。

我该如何解决这个问题？

Answer 1

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

你应该这样做:

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

为此，记得将 $compile 注入(inject)到指令中:

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