Question

我甚至不知道如何标题这个问题。所以，我有lightSlider的angularjs指令，我试图在指令中添加我自己的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")访问我自己的按钮但是现在我希望on（＆＃34; click＆＃34;）函数对我的指令的滑块元素执行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;
                });
            }
        }
    });

jQuery获取上一个/父函数

1 个答案: