Find closest element in AngularJS

Question

I want to slide toggle closest .contactDetails when a is clicked. Below is my code which does not work.

<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();
                });
            }
        };
    });

I think AngularJS cannot find the closest .contactDetails somehow so slideToggle() cannot be performed.

I tried but element.closest(".contactDetails") did not work either. Thanks for your help.

Answer 1

I've created solution that you've asked for --> Run Snippet.

1) In this place I get the .contactDetails element

var contactDetails = element.next();

2) Then I call method

.toggleClass('hide')

on .contactDetails element, to show/hide element.

3) ".hide" class has display property set to none;

display: none;

4) Add event listener on element

 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

Answer 2

Since the anchor tag does not contain the div you can't use find. And closest searches up the DOM, not down. Here is how I would do it (just showing the link: portion of the directive):

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

jsFiddle