$（this）在angularJS中不起作用

Question

我正在用angularJS進行chrome擴展，現在遇到了問題。

我想在彈出頁面中添加一些按鈕，並且當單擊按鈕時，它的祖先節點消失了，這是我的代碼。

在popup.html中

<div class="deadline">
  <div class="btn-group">
    <button class="btn" ng-click="removeDeadline()">complete</button>
  </div>
</div>

在controller.js中

$scope.removeDeadline = function(){
  $(this).closest(".deadline").remove();
}

我不知道為什么這行不通。 請幫我。

Answer 1

首先， $是jQuery函數-您是否在擴展名中包含jQuery？ 如果不是，則angular.element是AngularJS附帶的內置“ jQuery Lite”的函數。

其次，使用AngularJS時，從控制器操作內部訪問DOM元素的形式不正確：Angular的全部內容涉及自動反映模型狀態的視圖（通過$scope ）。 例如，您顯示的代碼片段將更正確地寫為：

<div class="deadline" ng-hide="hideLine">
  <div class="btn-group">
    <button class="btn" ng-click="removeDeadline()">complete</button>
  </div>
</div>

$scope.removeDeadline = function(){
  $scope.hideLine = true;
}

請把這句話從FAQ牢記在心：

停止嘗試使用jQuery修改控制器中的DOM。 真。 這包括添加元素，刪除元素，檢索其內容，顯示和隱藏它們。 使用內置指令，或在必要時編寫自己的指令來進行DOM操作。 有關復制功能，請參見下文。

如果您想改掉習慣，請考慮從應用程序中刪除jQuery。 真。 Angular具有$ http服務和功能強大的指令，使其幾乎總是不必要的。 Angular捆綁的jQLite具有一些在編寫Angular指令時最常用的功能，尤其是綁定到事件。