дочерний директивный доступ к каждой родительской директиве

Question

Я пытаюсь сделать slider в angularJS. У меня есть дочерняя директива с прослушивателями событий. Когда прослушивается главное событие (mousedown), он вызывает функцию из родительской директивы (через контроллер) и изменяет стиль различных элементов html. Работает как шарм, когда на странице есть только одна директива. Если их более одного, вызывается каждый родительский контроллер. Я не понимаю, почему.

Plknr: http://plnkr.co/edit/9vGXxjDbqqEOzLcXRkoW?p=preview

Родитель директива:

return { 
     restrict: 'EA', 
     scope: { 
      sliderStep: '@', 
      sliderBothHandles: '@', 
      sliderMinVal: '=', //value min handle 
      sliderMaxVal: '=', //value max handle 
      sliderMin: '@', //minimum value authorized 
      sliderMax: '@' //maximum value authorized 
     }, 
     templateUrl: 'slider_template', 
     controller: sliderController, 
     transclude: true 

}; 

Ребенок директива:

return { 
     restrict: 'EA', 
     link: link, 
     require: '^mcsSlider', 
     scope: true 
}; 

Markup:

<mcs-slider slider-step="1" slider-max-val="formCtrl.value1" slider-min="0" slider-max="7200"> 
    <div mcs-slider-handle class="slider-handle max-slider-handle round" aria-valuemin="0" aria-valuemax="7200" aria-valuenow="{{formCtrl.value1}}" tabindex="0" style="left:0%;"></div> 
</mcs-slider> 

Answer 1

Проблема, кажется, внутри директивы mcsSliderHandle, в функции $interval. Вы используете $('.min-slider-handle'), который найдет все элементы этого класса! Вы должны получить только элементы внутри текущей директивы. Неправильный, но рабочий плунжер here