AngularJs指令用函数追加和删除DOM元素

Question

I'm trying to create a directive to append a new html element to the DOM and also to remove it.

The logic to append and remove is already working, except to remove the element when clicking on a button. Right now I'm only able to remove it when pressing the esc key. I have this directive here:

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();
                }
            });
        }
    }
}

If I click the button to insert the new element , it works. If I press esc the element is removed. But if I press the button to Close the element, which has this "ng-click="removeEl()" , nothing happens.

How can I solve this problem?

Answer 1

You never compiled HTML element, so ng-click attribute doesn't mean anything for Angular.

You should do this:

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

For this, remember to inject $compile into directive:

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