Javascript 子指令访问每个父指令

我正在尝试用angularJS做一个

滑块

。我有一个带有事件侦听器的child指令。在侦听主事件（

mousedown

）时，它会从父指令（通过控制器）调用函数，并更改各种html元素的样式。当页面上只有一个指令时，它就像一个符咒。如果有多个控制器，则调用每个父控制器。 我不明白为什么

规划师:

父指令：

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

<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>

子指令：

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

<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>

标记：

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

<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>

---

问题似乎出现在指令

mcsSliderHandle

中的

$interval

函数中。 您正在使用

$（'.min slider handle'）

来查找该类的所有元素！ 您必须仅检索当前指令中的元素。

---

错误但有效的plunker

我仍在试图找出

mcsSliderHandle

指令中的

$interval

。

$（'.min slider handle'）.css（'left'）

可能是问题吗？