子指令访问每个父指令

Question

I am trying to do a slider in angularJS. I have a child directive with events listeners. When the main event ( mousedown ) is listened to, it calls a function from the parent directive (via a controller) and changes style of various html elements. Works like a charm when there is only one directive on the page. If there are more than one, every parent controller is called. I don't understand why.

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

Parent directive:

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

};

Child directive:

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

The problem seems to be inside the directive mcsSliderHandle , in the $interval function. You're using $('.min-slider-handle') that will find all the elements with that class! You have to retrieve only the elements inside the current directive. Wrong but working plunker here