用ng-click替换.click()不能正常工作

时间:2015-07-14 03:25:51

标签: angularjs-ng-click

我确定这只是因为我使用它错了,但我很困惑。这一切都始于我确信将我正在构建的Angular站点移动到使用路由器时。结果,我的很多jQuery代码都停止了工作。

例如,我在幻灯片下方有一个导航线,每个幻灯片都带有封端箭头和点。单击箭头时,它会前进或后退。您也可以点击一个点并获得该幻灯片。这是我的代码:

  $('#arrow-next').click(function() {

    var currentSlide = $('.active-slide');
    var nextSlide = currentSlide.next();

    var currentDot = $('.active-dot');
    var nextDot = currentDot.next();

    if(nextSlide.length === 0) {
      nextSlide = $('.slide').first();
      nextDot = $('.dot').first();
    }

    currentSlide.removeClass('active-slide').fadeOut(600, function(){
        nextSlide.fadeIn(600).addClass('active-slide');
    });

    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');

  });
  // END Clicking NEXT arrow

    $('.arrow-prev').click(function() {

    var currentSlide = $('.active-slide');
    var prevSlide = currentSlide.prev();

    var currentDot = $('.active-dot');
    var prevDot = currentDot.prev();

    if(prevSlide.length === 0) {
      prevSlide = $('.slide').last();
      prevDot = $('.dot').last();
    }

    currentSlide.removeClass('active-slide').fadeOut(600, function(){
        prevSlide.fadeIn(600).addClass('active-slide');
    });

    currentDot.removeClass('active-dot');
    prevDot.addClass('active-dot');

    }); // end click

    $('.dot').click(function() {

        var index = $('.dot').index($(this));

        var currentSlide = $('.active-slide');
        var newSlide = $('.slide').eq(index);

        var currentDot = $('.active-dot');
        var newDot = $(this);

        currentSlide.removeClass('active-slide').fadeOut(600, function(){
            newSlide.fadeIn(600).addClass('active-slide');
        });

        currentDot.removeClass('active-dot');
        newDot.addClass('active-dot');

    }); // end click

我想将这些变成我可以在ng-clck上调用的函数,但我无法弄清楚如何。

1 个答案:

答案 0 :(得分:1)

无论您使用的是哪个类点,都要在该html标记中添加ng-click。那应该可以解决问题。 将单击函数转换为范围函数,并将其作为参数发送到ng-click。 但建议不要在控制器中进行DOM操作。如果您以后必须编写单元测试用例,则会遇到问题。所有DOM操作都应该在你的指令中执行。