Angularjs 多个元素的一个指令_Angularjs_Angularjs Directive_Angularjs Scope

Angularjs 多个元素的一个指令

angularjs

Angularjs 多个元素的一个指令,angularjs,angularjs-directive,angularjs-scope,Angularjs,Angularjs Directive,Angularjs Scope,例如，我有这样的HTML页面： <body ng-app="MyApp"> <standart-slider class="slider-app" controls-value="{previous: '#previous', next: '#next', sliderWrap: '.wrapper', slidesName: '.slide', minSlides: '4', controls: '.control'}"> <div class=

例如，我有这样的HTML页面：

<body  ng-app="MyApp">
<standart-slider class="slider-app" controls-value="{previous: '#previous', next: '#next', sliderWrap: '.wrapper', slidesName: '.slide', minSlides: '4', controls: '.control'}">
        <div class="control" id="previous">Prev</div>
        <div class="slide-add">Add</div>
        <div class="control" id="next">Next</div>
        <div class="wrapper">
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
        </div>
 </standart-slider>
 <standart-slider class="slider-app" controls-value="{previous: '#previous', next: '#next', sliderWrap: '.wrapper', slidesName: '.slide', minSlides: '4', controls: '.control'}">
        <div class="control" id="previous">Prev</div>
        <div class="slide-add">Add</div>
        <div class="control" id="next">Next</div>
        <div class="wrapper" data-my-attr="">
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
        </div>
 </standart-slider>
</body>


上
添加
下一个
上
添加
下一个

以及该指令：

var MyApp = angular.module('MyApp', []);

MyApp.directive('standartSlider', function () {
var linkFn = function (scope, element, attrs) {
    console.log('Hello!');
    var controls = scope.contorls();
    console.log(controls.previous);
    var currentPosition = 0;
    var slideWidth = 70;
    var slides = angular.element(controls.slidesName);
    var wrapper = angular.element(controls.sliderWrap);
    var previous = angular.element(controls.previous);
    var next = angular.element(controls.next);
    var numberOfSlides = slides.length;
    console.log(numberOfSlides, slides, wrapper, previous, next);

    wrapper.css('overflow', 'hidden');
    slides.wrapAll('<div id="slideInner"></div>')
    $('#slideInner').css('width', slideWidth * numberOfSlides);

    angular.element(controls.controls).click(function () {
        currentPosition = ($(this).attr('id') == 'next') ? currentPosition + 1 : currentPosition - 1;
        console.log(currentPosition);
        attrs.myAttr = "100";

        $('#slideInner').animate({
            'marginLeft': slideWidth * (-currentPosition)
        });
        console.log($('#slideInner').css("marginLeft"))
    });


    }

    return {
        restrict: 'E',
        scope: {
            contorls: '&controlsValue'
        },
        link: linkFn
    }
});

var MyApp=angular.module（'MyApp'，[]）；
MyApp.指令（'standartSlider'，函数（）{
var linkFn=函数（范围、元素、属性）{
console.log（'Hello！'）；
var controls=scope.contorls（）；
console.log（controls.previous）；
var currentPosition=0；
var slideWidth=70；
var slides=angular.element（controls.slidesName）；
var wrapper=angular.element（controls.sliderwrapp）；
var-previous=angular.element（controls.previous）；
var next=angular.element（controls.next）；
var numberOfSlides=slides.length；
日志（幻灯片数、幻灯片数、包装器数、上一页、下一页）；
css（'overflow'，'hidden'）；
幻灯片。wrapAll（“”）
$（'slideInner'）.css（'width'，slideWidth*numberOfSlides）；
元素（控件。控件）。单击（函数（）{
currentPosition=（$（this）.attr（'id'）='next'）？currentPosition+1:currentPosition-1；
控制台日志（当前位置）；
attrs.myAttr=“100”；
$（'slideInner'）。设置动画({
“marginLeft”：滑动方向*（-currentPosition）
});
console.log（$（'slideInner'）.css（“marginLeft”））
});
}
返回{
限制：'E'，
范围：{
控件：“&controlsValue”
},
链接：linkFn
}
});

问题是，然后我点击“下一步”按钮，滑动第一个滑块，而不是第二个滑块。在我看来，范围不是隔离DOM元素。如何将指令的副本与DOM元素隔离？

fiddle示例：

如我所见，您的指令使用id而不是类。不要忘记，在DOM文档中，即使父元素不同，也不能有两个id相同的元素

因此，您需要重写指令以使用类并仅搜索链接元素的子元素。

不注意id。非常感谢。