jQuery get previous/parent function

Question

Я даже не знаю, как назвать этот вопрос. Итак, у меня есть эта директива angularjs для lightSlider, и я пытаюсь добавить свои собственные кнопки next/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() для слайдера элемента моей директивы, и я просто не знаю, как сделать это.

.. это мой 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» первый - и затем использовать его внутри на функции мыши. Когда вы выполняете цепочки функций, 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; 
       }); 
      } 
     } 
    });