0

我正在使用 angularJS 进行 chrome 扩展，现在我遇到了问题。

我想在我的弹出页面中添加一些按钮，我想在单击按钮时，它的祖先节点消失，这是我的代码。

在 popup.html 中

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

在控制器.js

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

我不知道为什么这不起作用。请帮我。

4

1 回答 1

9

首先，$是一个 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;
}

将常见问题解答中的这句话牢记在心：

停止尝试使用 jQuery 修改控制器中的 DOM。真的。这包括添加元素、删除元素、检索它们的内容、显示和隐藏它们。使用内置指令，或在必要时编写自己的指令来进行 DOM 操作。有关复制功能，请参见下文。

如果您正在努力改掉这个习惯，请考虑从您的应用程序中删除 jQuery。真的。Angular 具有 $http 服务和强大的指令，几乎总是不需要它。Angular 捆绑的 jQLite 具有一些最常用于编写 Angular 指令的特性，尤其是绑定到事件。

于 2013-05-05T08:16:55.333 回答