AngularJs指令添加和删除功能的DOM元素

我试图创建一个directive追加一个新的html element到DOM并且也删除它。AngularJs指令添加和删除功能的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()"的元素，则什么都不会发生。

我该如何解决这个问题？

来源

2016-05-23 celsomtrindade

你不需要'的document.getElementById（ “收藏夹”）'。你应该使用'element.find（'＃lightBox'）'，因为它在指令元素中。另外，你是否有一个“在ng-click前？因为如果你这样做，那就是问题 –

......或者甚至更好：'scope.removeEl = function（）{ngEl.remove（）;}'就足够了。 – dfsq

@ChrisStanley关于ngClick no，这是一个错字错误，aboute getElementById我正在使用它，因为我正在追加到身体，但忘了它，谢谢提醒我 – celsomtrindade

你从来没有编译过HTML元素，所以ng-click属性对Angular来说并不意味着什么。

你应该这样做：

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

对于这一点，记得注入$compile到指令：

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

来源

2016-05-23 20:28:24 dfsq

嗯，它w orked。但是如果我尝试再次打开它，它不起作用。你知道为什么吗？ – celsomtrindade

你如何试图打开它？ – dfsq

Nevermin，这是因为我也在模板上设置了指令集。我从那里删除它，现在它工作。完善！美元汇编的真正工作是什么？你介意解释一下，这样我可以更多地了解这个？ – celsomtrindade

AngularJs指令添加和删除功能的DOM元素

回答

相关问题