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) { /* ... */ }

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

1 个答案: