AngularJS在子元素中使用ng单击隐藏任何父div

我已经知道显示/隐藏DOM元素的ng if和ng show方法。但是，在本例中，我有大约100个div元素，每个元素都有多个子span元素，每当单击一个span时，我都希望隐藏父div

例如：

<div>Display text
<span ng-click="hideThisDiv(this)">Option1</span>
<span ng-click="hideThisDiv(this)">Option2</span>
<span ng-click="hideThisDiv(this)">Option3</span>
</div>

然而，在这个函数中使用console.log（element.parent）表明，访问这个div元素的“visible”属性并不是一种简单的方法。至少，到目前为止我还看不到

---

这似乎是一个简单的概念，我只是缺少正确的语法或访问方法。

尝试下面的代码，它可以工作

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.hideParent=函数（事件）{
var pEle=event.currentTarget.parentElement；
pEle.style.visibility=“隐藏”；
}
});

这是父div单击下面隐藏

单击此处隐藏

或者在这里

还是在这里
解决方案：
更好的方法是使用jqLite创建并隐藏父元素

var app = angular.module('app', []);

app.directive('hideParentOnClick', function () {
  return {
    link: function (scope, element) {
      element.on('click', function () {
        element.parent().css({display: 'none'});
      });
    }
  }
});

在您的HTML中：

<div>
    Display text
    <span hide-parent-on-click>Option1</span>
    <span hide-parent-on-click>Option2</span>
    <span hide-parent-on-click>Option3</span>
</div>


显示文本
选择1
选择2
选择3


优势：

您可以将此指令与前面提到的
ng click
结合使用，因为最后一个指令在此方法中未使用，可以自由用于任何其他目的
指令用于DOM操作，而不是控制器
更好的整体模块化
如果您喜欢使用jquery执行此操作，请使用jqLite方法处理angular.element，如下所示：

$scope.hideThisDiv = function(el) {
  angular.element(el.target).parent().addClass('hidden');
};

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

然后在这样的事件中传递：

$scope.hideThisDiv = function(el) {
  angular.element(el.target).parent().addClass('hidden');
};

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

好主意。但是没有结果，甚至没有错误消息。我修改了代码，现在它隐藏了父元素