AngularJs指令用函數追加和刪除DOM元素

Question

我正在嘗試創建一個directive ，將新的html element附加到DOM並刪除它。

除了在單擊按鈕時刪除element ，添加和刪除的邏輯已經起作用。 現在我只能在按下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();
                }
            });
        }
    }
}

如果我單擊按鈕插入新element ，它可以工作。 如果按esc ， element被刪除。 但是，如果我按下按鈕關閉元素，其中包含"ng-click="removeEl()" ，則沒有任何反應。

我怎么解決這個問題？

Answer 1

你從不編譯HTML元素，因此ng-click屬性對Angular沒有任何意義。

你應該做這個：

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

為此，請記住將$compile注入指令：

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