Question

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

<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")也没用。谢谢你的帮助。

Answer 1

由于锚标记不包含 div，因此无法使用find。最近的搜索向上 DOM，而不是向下搜索。这是我将如何做到的（只显示链接：指令的一部分）：

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

this

Answer 2

我已经创建了你要求的解决方案 - ＆gt;运行代码段。

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

var contactDetails = element.next（）;

2）然后我调用方法

.toggleClass（ '隐藏'）

on .contactDetails元素，显示/隐藏元素。

3）“。hide”类的display属性设置为none;

display：none;

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>

ERE

在AngularJS中查找最接近的元素

2 个答案: