在 AngularJS 中查找最近的元素答案

【问题标题】：Find closest element in AngularJS在 AngularJS 中查找最近的元素
【发布时间】：2016-03-09 23:14:00
【问题描述】：

我想在点击a 时滑动切换最接近 .contactDetails。下面是我的代码，它不起作用。

<ul>
    <li ng-repeat="detail in details">
        <div>
            <a show-contact>{{something}}</a>
            <div class="contactDetails">
                <ul>
                    <li ng-repeat="another ng-repeat">
                        <b>{{something}}</b>
                    </li>
                </ul>
            </div>
            <br>
        </div>
    </li>
</ul>

app.directive("showContact", function () {
        return {
            restrict: "A",
            link: function (scope, element) {
                element.click(function () {
                    element.find(".contactDetails").slideToggle();
                });
            }
        };
    });

我认为 AngularJS 无法以某种方式找到 最接近 .contactDetails，因此无法执行 slideToggle()。

我试过了，但element.closest(".contactDetails") 也没有工作。感谢您的帮助。

【问题讨论】：

我不明白你所说的“向下遍历”和“找到壁橱 .contactDetails”是什么意思 - ng-repeat 只是一个迭代数组每个索引的指令......请更具体带着你的问题
@MaxwellLasky 希望我现在能理解自己，我刚刚更新了这个问题。 :( 谢谢。
抱歉，我仍然很难准确理解您的要求......也许创建一个 jsfiddle 会帮助其他人和我自己更好地理解您的问题。

标签： javascript angularjs

【解决方案1】：

由于锚标记不包含您不能使用查找的 div。最接近的搜索向上 DOM，而不是向下。这是我的做法（仅显示链接：指令的一部分）：

function(scope, element) {
    element.on("click", function() {
        element.next(".contactDetails").slideToggle();
    });
}

jsFiddle

【讨论】：

【解决方案2】：

我已经创建了您要求的解决方案 --> 运行代码段。

1) 在这个地方我得到了 .contactDetails 元素

var contactDetails = element.next();

2) 然后我调用方法

.toggleClass('隐藏')

在 .contactDetails 元素上，显示/隐藏元素。

3) “.hide”类的显示属性设置为无；

显示：无；

4) 在元素上添加事件监听器

 element.on('click', function () {
     //Code goes here               
 });

var myapp = angular.module('myapp', []);
myapp.directive("showContact", function () {
        return {
            restrict: "A",
            link: function (scope, element) {
                element.on('click', function () {
                  var contactDetails = element.next();
                    contactDetails.toggleClass('hide');                       
                });
            }
        }
});
                        
    
myapp.controller('MainCtrl', ['$scope', function($scope) {
  this.something = 'This is something';
  this.arr = ['mike', 'john', 'brian', 'joe'];  
}]);

body {
font-family: Arial, Tahoma;  
}
.hide {
  display:none;
}

a{
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
  <div ng-controller="MainCtrl as ctrl">
    <ul>
    <li>
        <div>
            <a show-contact>Toggle class (CLICK ME)</a>
            <div class="contactDetails">
                <ul>
                    <li ng-repeat="name in ctrl.arr">
                        <b>{{name}}</b>
                    </li>
                </ul>
            </div>
            <br>
        </div>
    </li>
</ul>


    
  </div>
</div>

这里

【讨论】：