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

입니다. 체인 함수를 사용하는 경우에는 chain.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; 
       }); 
      } 
     } 
    });