jQuery前/親機能を取得

Question

私はこの質問にタイトルを付ける方法を知りません。 したがって、私はlightSliderのためのこのangularjs指令を持っています、そして私は自分の次の/ prevボタンを指令に追加しようとしています。

app.directive('lightSlider',function(){ 
    return{ 
     link:function(scope,element,attrs){ 


      scope.slider = $(element).lightSlider({ 
       item: 4, 
       responsive : [ 
        { 
         breakpoint:800, 
         settings: { 
          item:3, 
          slideMove:1, 
          slideMargin:6, 
         } 
        }, 
        { 
         breakpoint:480, 
         settings: { 
          item:2, 
          slideMove:1 
         } 
        } 
       ] 
      }).parent().parent().parent().prev().find("a").on('click', function (e) { 
       if (e.preventDefault) { 
        e.preventDefault(); 
       } else { 
        e.returnValue = false; 
       } 
       if ($(this).attr('class') === 'light-slider-prev') { 
        //alert($(this).parent().parent().find("ul").html());//goToPrevSlide()); 
        scope.slider.goToPrevSlide(); 
       } else { 
        scope.slider.goToNextSlide(); 
       } 
       return false; 
      }); 
     } 
    } 
}); 
    }); 

私は .parent().parent().parent().prev().find("a") で自分のボタンにアクセスするために管理しかし、今、私は（「クリック」）機能で私のディレクティブのスライダー要素に goToPrevSlide()/goToNextSlide()をしたい、と私はちょうどそれを行う方法を知りません。その後、クリック機能上の内側にそれを使用する -

が...これは、あなたが最初の「scope.slider」を定義を終了しなければならない場合は、私のhtml ..

<div class="light-slider-action"> 
     <a class="light-slider-next">Next</a> 
     <a class="light-slider-prev">Prev</a> 
    </div> 
    <div class="container"> 
     <ul light-slider> 
      <div ng-repeat="user in newMembersModel" class="blocks"> 
       <div class="card"> 
        <div class="card-image"> 
         <img src="assets/img/{{user.img}}"> 
        </div> 
        <div class="card-content"> 
         <h4>{{user.name}}</h4> 

         <p></p> 

         <p class="sm"></p> 
        </div> 
       </div> 
      </div> 
     </ul> 
    </div> 

Answer 1

です。機能を連鎖させる場合、scope.sliderは連鎖関数内では定義されません。

・ホープ、このことができます - http://codepen.io/akshatamohanty/pen/NRXZYz?editors=1010

app.directive('lightSlider',function(){ 
     return{ 
      link:function(scope,element,attrs){ 
       // define the slider and append to scope 
       scope.slider = $(element).lightSlider({ 
        item: 4, 
        responsive : [ 
         { 
          breakpoint:800, 
          settings: { 
           item:3, 
           slideMove:1, 
           slideMargin:6, 
          } 
         }, 
         { 
          breakpoint:480, 
          settings: { 
           item:2, 
           slideMove:1 
          } 
         } 
        ] 
       }); 

       scope.slider.parent().parent().parent().prev().find("a").on('click', function(e){ 
       //$('a').on('click', function (e) { 
        console.log("clicked"); 
        if (e.preventDefault) { 
         e.preventDefault(); 
        } else { 
         e.returnValue = false; 
        } 

        if ($(e.target).attr('class') === 'light-slider-prev') { 
         //alert("previous"); 
         scope.slider.goToPrevSlide(); 
        } else { 
         //alert("next"); 
         scope.slider.goToNextSlide(); 
        } 

        return false; 
       }); 
      } 
     } 
    });