我已经知道显示/隐藏dom元素的ng-if和ng-show方法。但是，在这种情况下，我有大约100个div元素，每个元素都有多个子跨度元素，每当单击跨度时，我都希望父级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>
在功能中，我希望能够做类似的事情：
$scope.hideThisDiv = function(element){
element.$parent.$id.visible = false;
}
在此功能中使用console.log（元素。$ parent）表明，没有一种简单的方法访问此DIV元素的"可见"属性。至少不是我能看到到目前为止。
这似乎是一个简单的概念，我只是缺少适当的语法或访问方法。
尝试以下代码工作
var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
$scope.hideParent = function (event) {
var pEle = event.currentTarget.parentElement;
pEle.style.visibility = "hidden";
}
});<!DOCTYPE html>
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller="MainCtrl">
<div>
This is parent div click below to hide <br />
<span ng-click="hideParent($event)">Click here to hide</span> <br />
<span ng-click="hideParent($event)">or Here</span><br />
<span ng-click="hideParent($event)">or Here</span>
</div>
</body>
</html>如果您喜欢使用jQuery执行此操作，则使用jqlite方法与Angular.ement这样的元素：
$scope.hideThisDiv = function(el) {
angular.element(el.target).parent().addClass('hidden');
};
然后在这样的情况下通过：
<span ng-click="hideThisDiv($event)">Option1</span>
将其添加到您的CSS
.hidden {
display:none
}
解决方案：
更好的方法是创建自定义指令并使用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>
plunker示例
优点：
- 您可以将此指令与上述
ng-click结合起来，因为最后一个指令未在此方法中使用，并且可以用于任何其他目的。 - 指令旨在用于DOM操作，不是控制器。在这里阅读更多。
- 更好的总体模块化。