Une directive pour plusieurs éléments

Par exemple, j'avoir une telle page HTML:Une directive pour plusieurs éléments

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

Et cette directive:

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

Le problème est que je clique sur le bouton « Suivant », glisse premier curseur pas la seconde. Comment je le vois, la portée ne pas isoler les éléments DOM. Comment pouvez-vous isoler une copie de la directive avec des éléments DOM? Exemple d'un violon: jsFiddle

Source

2013-02-21 falloff

Comme je le vois, votre directive utilise des ID au lieu de classes. N'oubliez pas que dans le document DOM, il ne peut pas y avoir deux éléments avec le même identifiant même avec des parents différents.

Vous devez donc réécrire votre directive pour utiliser les classes et rechercher uniquement les éléments enfants de l'élément lié.

Source

2013-02-21 08:22:39

Aucune attention portée à l'identifiant. Merci beaucoup. – falloff

Une directive pour plusieurs éléments

Répondre

Questions connexes