一個指令的幾個元素

例如，我有這樣的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 
    } 
});

的問題是，然後我點擊「下一步」按鈕，滑第一滑不是第二個。我如何看它，範圍不隔離DOM元素。你怎樣才能用DOM元素分離指令的副本？小提琴的示例：jsFiddle

來源

2013-02-21 falloff

正如我所看到的，您的指令使用Ids而不是類。不要忘記，在DOM文檔中，即使父母不同，也不能有兩個具有相同ID的元素。

所以你需要重寫你的指令來使用類和僅在鏈接元素的子元素進行搜索。

來源

2013-02-21 08:22:39

不注意id。非常感謝。 – falloff 2013-02-21 08:38:36

一個指令的幾個元素

回答

相關問題