解决方案：

Question

我已经了解了ng-if和ng-show显示/隐藏DOM元素的方法。但是，在这种情况下，我有大约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>

在该功能中，我希望能够做到这样的事情：

$scope.hideThisDiv = function(element){
element.$parent.$id.visible = false;
}

然而，在此函数中使用console.log（element。$ parent）表明，没有一种简单的方法可以访问＆＃34; visible＆＃34;这个div元素的属性。至少，不是我能看到的。

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

Answer 1

尝试下面的代码

import java.io.File;
import java.util.Optional;

public class GetFileExtensionTool {

    public static Optional<String> getFileExtension(File file) {
        if (file == null) {
            throw new NullPointerException("file argument was null");
        }
        if (!file.isFile()) {
            throw new IllegalArgumentException("getFileExtension(File file)"
                    + " called on File object that wasn't an actual file"
                    + " (perhaps a directory or device?). file had path: "
                    + file.getAbsolutePath());
        }
        String fileName = file.getName();
        int i = fileName.lastIndexOf('.');
        if (i > 0) {
            return Optional.of(fileName.substring(i + 1));
        } else {
            return Optional.empty();
        }
    }
}

var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
  $scope.hideParent = function (event) {
    var pEle = event.currentTarget.parentElement;
    pEle.style.visibility = "hidden";
  }
});

Answer 2

解决方案：

更好的方法是创建custom directive并使用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 Example

优点：

您可以将此指令与前面提到的ng-click结合使用，因为最后一个指令未在此方法中使用，可以自由地用于任何其他目的。
指令适用于DOM操作，不是控制器。 Read more here。
更好的整体模块化。

Answer 3

如果您更喜欢使用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
}

AngularJS使用子元素中的ng-click隐藏任何父div

3 个答案:

解决方案：

优点：