Javascript AngularJS与用于选择父元素的jQuery

我正在发布我的html和指令代码。我有两个跨距，我已将其附加到

ng单击

。在

ng上单击

，我想检查它们的父项（

.parent portlet

）的类，但到目前为止，由于选择了所有的父portlet，而不是当前的父portlet，所以我的工作不正常

去除
加回

这是我在指令中的内容：

scope.removePortlet=函数（portlet）{
var port=$（'.remove'）.parent（）.parent（）；
port.addClass（“已删除”）；
addClass（'edit-portlet'）；
};
scope.addPortlet=函数（portlet）{
var port=$（'.add back'）.parent（）.parent（）；
if（portlet.hasClass（'removed'））{
port.removeClass（'removed'）；
removeClass（'edit-portlet'）；
}
};

这段代码的问题是VARPortlet捕获所有的portlet（父portlet），我只想捕获与单击操作相关的portlet。我怎样才能做到这一点？我尝试将其传递给我的jquery select，如下所示：

var portlet = $('.add-back', this).parent().parent();

但那没用。有什么办法可以做到这一点吗

---

提前感谢。

您可以将

$元素注入控制器，然后将其用作
$
选择器的上下文


angular.module（'app'，[]）.controller（'ctrl'，function（$scope，$element）{
$scope.addPortlet=函数（portlet）{
log（$（'.addback'，$element））；
};
});

去除
加回
将$event传递给ng，如下所示：

<span ng-click="removePortlet($event)"></span>

scope.removePortlet = function(ev) {
  var port = $(ev.target).parent().parent();
  port.addClass('removed');
  port.addClass('edit-portlet');
};

scope.addPortlet = function(ev) {
  var port = $(ev.target).parent().parent();
  if ($(ev.target).hasClass('removed')) {
    port.removeClass('removed');
    port.removeClass('edit-portlet');
  }
};

抓取“事件的目标”将确保您只处理实际单击的项目。请注意，angular使用$event将事件传递给函数

我还将结合类修改行并使用.closest（）针对特定的父对象（以防您修改DOM）对其进行一些清理：

改用
ng class
。以下是使用类更改背景颜色的示例：


var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.portlet={
课程：{
“父portlet”：true，
“编辑portlet”：false，
“已删除”：false
}
}
$scope.removePortlet=函数（portlet）{
portlet.classes.removed=true；
classes[“editportlet”]=true；
};
$scope.addPortlet=函数（portlet）{
portlet.classes.removed=false；
classes[“editportlet”]=false；
};
});
/*将您的css放在这里*/
.父portlet{
背景色：#ccc；
填充：20px；
}
.parent-portlet.removed{
背景色：#c00；
}
.父portlet按钮{
填充：10px；
利润率：0.10px；
}

去除
加回
尝试使用angular.element而不是$（）
var port=$（this.parent（'.parent portlet'）？避免使用jQuery。您应该使用
ng class
并更新
portlet
classes-therevar-port=$（ev.target）.closest（'.parent-portlet'）；对我来说太棒了！感谢您的解决方案和建议。非常感谢。这是我的荣幸！
scope.removePortlet = function(ev) {
  var port = $(ev.target).closest('.parent-portlet');
  port.addClass('removed, edit-portlet');
};

scope.addPortlet = function(ev) {
  var port = $(ev.target).closest('.parent-portlet');
  if (portlet.hasClass('removed')) {
    port.removeClass('removed, edit-portlet');
  }
};