угловая директива переключает класс

Question

У меня есть следующий код, где я пытаюсь переключить первое вхождение класса. Проблема в том, что это не работает, и я понятия не имею, почему нет.

(function() { 
'use strict'; 

angular.module('someApp') 

.directive('eventButton', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      eventItemDisplayed: '@' 
     }, 
     transclude: true, 
     replace: false, 
     template: '<button class="btn btn-default" ng-click="toggleEvent()">{{text}}</button>', 
     link: function ($scope, element, attrs) { 
      $scope.eventItemDisplayed = false; 
      $scope.text = 'Show' 
      $scope.toggleEvent = function() { 
       element.find('event-details:first').toggleClass('hide-event'); 
       $scope.eventItemDisplayed = ($scope.eventItemDisplayed) ? false : true; 
       if ($scope.eventItemDisplayed) { 
        $scope.text = 'Show'; 
       } else { 
        $scope.text = 'Hide'; 
       } 
      } 
     } 
    } 
}); 
})(); 

HTML, выглядит следующим образом:

<event-button></event-button> 
<div class="event-details hide-event"> 

Если я использую

element.next().toggleClass('hide-element') 

Затем он работает отлично, т.е. он добавляет класс к элементу, как и ожидалось. Я подозреваю, что это потому, что next() возвращает элемент, тогда как find() возвращает селектор, представляющий класс?

Answer 1

поскольку класс event-details оленья кожа лежит внутри (не в своих детях) элемент директивы вы не можете найти его с находкой()

Следующими работают как следующие родственный элемент директивы

element.next() будет доставит вас к вам <div class="event-details hide-event"> as it next sibling of <event-button></event-button>