AngularJS使用ng隐藏任何父div
我已经知道显示/隐藏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（element。$ 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来做到这一点，那么就像这样使用angular.element的jqLite方法：
$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结合起来，因为最后一个指令不在此方法中使用，并且可以自由用于任何其他目的。