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元素

回答

相關問題